使用 Flask 上传图像并将其显示为响应

Question

使用 Flask 上传图像并将其显示为响应

Ric*_*tto 7 html python file-upload flask flask-uploads

我是前端开发的初学者，必须在 Flask 中为一个项目做一个小型 Web 应用程序。

我编写了一个 Flask 应用程序，它允许您使用 HTML 表单上传图像，然后在您点击上传时将图像显示回用户。我需要修改它，以便每次用户上传图像时都不会将图像保存到项目目录中的文件夹中。基本上，应用程序应该将上传的图像发送回响应正文。

到目前为止，这是我的代码：

上传测试.py

import os


from uuid import uuid4

from flask import Flask, request, render_template, send_from_directory

app = Flask(__name__)
# app = Flask(__name__, static_folder="images")



APP_ROOT = os.path.dirname(os.path.abspath(__file__))

@app.route("/")
def index():
    return render_template("upload.html")

@app.route("/upload", methods=["POST"])
def upload():
    target = os.path.join(APP_ROOT, 'images/')
    print(target)
    if not os.path.isdir(target):
            os.mkdir(target)
    else:
        print("Couldn't create upload directory: {}".format(target))
    print(request.files.getlist("file"))
    for upload in request.files.getlist("file"):
        print(upload)
        print("{} is the file name".format(upload.filename))
        filename = upload.filename
        destination = "/".join([target, filename])
        print ("Accept incoming file:", filename)
        print ("Save it to:", destination)
        upload.save(destination)

    return render_template("complete.html", image_name=filename)

@app.route('/upload/<filename>')
def send_image(filename):
    return send_from_directory("images", filename)

if __name__ == "__main__":
    app.run(port=8080, debug=True)

Run Code Online (Sandbox Code Playgroud)

upload.html - 创建一个上传表单

<!DOCTYPE html>
<html>
<head>
<title>Upload</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>

<form id="upload-form" action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">

    <strong>Files:</strong><br>
    <input id="file-picker" type="file" name="file" accept="image/*" multiple>
    <div id="msg"></div>
    <input type="submit" value="Upload!" id="upload-button">
</form>
</body>
<script>

    $("#file-picker").change(function(){

        var input = document.getElementById('file-picker');

        for (var i=0; i<input.files.length; i++)
        {

            var ext= input.files[i].name.substring(input.files[i].name.lastIndexOf('.')+1).toLowerCase()

            if ((ext == 'jpg') || (ext == 'png'))
            {
                $("#msg").text("Files are supported")
            }
            else
            {
                $("#msg").text("Files are NOT supported")
                document.getElementById("file-picker").value ="";
            }

        }


    } );

</script>
</html>

Run Code Online (Sandbox Code Playgroud)

complete.html - 显示用户点击“上传”后保存的文件夹中的图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Uploaded
<img src=" {{url_for('send_image', filename=image_name)}}">
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我已经尝试了很多研究，但除了在显示文件夹后删除文件夹外找不到任何其他内容（我认为这不是解决手头问题的正确方法）。我真的很感激这方面的任何帮助，如果有比我的代码目前所做的更好的解决方案，我很想了解更多！

谢谢！:)

Answer 1

Shu*_*aik 2

请检查以下代码可以帮助您。将以下代码复制到文件夹upload.html中templates。

<!DOCTYPE html>

<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />

 <script src="{{ url_for('static', filename='upload.js') }}"></script>

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
<form action = "http://127.0.0.1:5000/uploader" method = "POST" 
 enctype = "multipart/form-data">
  <input type='file' name = 'file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
 <input type = "submit"/>
</form>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

将以下代码复制到文件夹upload.js中的文件中static

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#blah')
            .attr('src', e.target.result)
            .width(150)
            .height(200);
    };

    reader.readAsDataURL(input.files[0]);
}
}

Run Code Online (Sandbox Code Playgroud)

现在将以下代码复制到 python 文件中

from flask import Flask, render_template, request
from werkzeug import secure_filename
import os 

app = Flask(__name__)

app.config['UPLOAD_FOLDER'] = 'D:/Projects/flask/image_upload/images/'

@app.route('/')
def upload_f():
   return render_template('upload.html')

@app.route('/uploader', methods = ['GET', 'POST'])
def upload_file():
   if request.method == 'POST':
      f = request.files['file']
      f.save(os.path.join(app.config['UPLOAD_FOLDER'],secure_filename(f.filename)))
      return 'file uploaded successfully'

# if __name__ == '__main__':
app.run(debug = True)

Run Code Online (Sandbox Code Playgroud)

上面的代码将帮助您在 html 页面上浏览和显示图像，并将图像保存在磁盘上所需的位置。

归档时间：	8 年，7 月前
查看次数：	8521 次
最近记录：	4 年，3 月前