如何在 Flask 中使用 Ajax 在网页上显示图像？

Question

我是 Python Flask 的新手。虽然，我已经在 PHP/Java 中多次完成此任务，但不知何故我被困在这里。

我的任务是将图像上传到服务器，然后在网页上显示图像，对图像进行一些处理，然后再次在客户端机器上显示处理后的图像。

为此，我在 Github 上使用flask-fileupload-ajax-example 的代码。我能够在网页上使用 ajax 正确显示文件名及其大小。但是，不知何故，当我尝试通过上传图像的路径设置<img> 标签的src 时，它给出了404, File not found error。

以下是相关代码sn-ps。

在app.py

@app.route('/uploadajax', methods=['POST', 'GET'])
def upldfile():
    if request.method == 'POST':
        files = request.files['file']
        print(files)
        if files and allowed_file(files.filename):
            filename = secure_filename(files.filename)
            app.logger.info('FileName: ' + filename)
            print('FileName: ' + filename)
            updir = os.path.join(basedir, 'upload/')
            files.save(os.path.join(updir, filename))
            file_size = os.path.getsize(os.path.join(updir, filename))
            file_path = '/'.join(['upload', filename])
            return jsonify(name=filename, path=file_path, size=file_size)

在app.js 文件中：

$('#submit').click(function() {
    event.preventDefault();
    var form_data = new FormData($('#uploadform')[0]);
    $.ajax({
        type: 'POST',
        url: '/uploadajax',
        data: form_data,
        contentType: false,
        processData: false,
        dataType: 'json'
    }).done(function(data, textStatus, jqXHR){
        console.log(data);
        console.log(textStatus);
        console.log(jqXHR);
        console.log('Success!');
        $("#resultFilename").text(data['name']); // name of the file
        $("#resultFilesize").text(data['size']); // size of the file
        //my_url = "{{ url_for('upload', filename="+data['name']+" }}";
        $("#image").attr('src', data['path']); // setting the src attribute of img tag
        $("#adv-btn").attr('value', data['name']);
        $("#adv-btn").show();
        //get_image(data['name'])
    }).fail(function(data){
        alert('error!');
    });
});

我也尝试过使用url_for，但它没有被渲染。任何建议将不胜感激。谢谢。

Answer 1

试试这样 在应用程序的根目录下创建一个名为 static 的文件夹，然后将上传文件夹移到那里。

然后像这样定义你的应用程序

app = Flask(__name__, static_url_path="/static", static_folder="static")
app.config["UPLOAD_FOLDER"] = "/root_flask_app/static/upload/"

然后在 app.py 里面试试：

updir = app.config["UPLOAD_FOLDER"]

在 app.js 内部：

$("#image").attr('src', '/static/'+data['path']);