Question

在我的项目中，我在前端使用Flask框架和JS，现在我想使用AJAX post方法将图像发送到服务器端并保存图像。
到目前为止，基于一些搜索，我使用FileReader（）API来读取文件并在Web上生成缩略图，这部分现在可以正常工作。然后我想继续将图像发送到服务器，但在此处被阻止。我使用$.AJAX post方法发送图像。
js函数如下：

var files = [];
function handleFileSelect(event) {
    var selectedFile = event.target.files[0];
    var reader = new FileReader();
    var imgtag = document.getElementById("currentImage");
    imgtag.title = selectedFile.name;
    reader.onload = function(event) {
      imgtag.src = event.target.result;
      object = {};
      object.filename = selectedFile.name;
      object.data = event.target.result;
      files.push(object);
    };
    reader.readAsDataURL(selectedFile);
 };

$(document).ready(function(){
    $("form").submit(function() {
        alert("good");
        $.each(files, function(index, file) {
        $.ajax({url: "/image",
            type: 'POST',
            data: {filename: file.filename, data: file.data},
        });      
     });
     });
});

由于我不知道如何处理和获取图片文件，所以服务器端代码我只是尝试request.files如下：

@app.route('/image',methods=['POST'])
def image_upload():
    file = request.files['files']
    print file.filename

我调试了＆＃39; / image＆＃39;可以获取帖子请求，但不知道如何从request获取图像。

编辑： HTML表单部分如下：

<form enctype="multipart/form-data">
<input type="file" id="files" name="files"  onchange="handleFileSelect(event)"/>
<img id="currentImage" src="/static/1.jpg" alt="Mountain View" style="width:304px;height:228px;">
<input type="submit" value="Analyse the image v2">
</form>

编辑II：在其他票证中找到解决方案，FormData对象是以下链接中的正确答案： How to upload a file using an ajax call in flask

Flask：如何处理和保存AJAX post方法发送的图像

0 个答案: