将 FileList 发送到 Flask 后端？答案

【问题标题】：Send FileList to Flask backend?将 FileList 发送到 Flask 后端？
【发布时间】：2020-03-02 06:48:08
【问题描述】：

我想让用户能够在多个阶段上传多个文件，这些文件将在上传时在我的烧瓶后端进行处理。因此，我的 HTML 中有一个多文件输入表单：

<form action="/do-stuff" method="POST" enctype="multipart/form-data">
    <label id="file-uploader-label" for="file-uploader">Upload Files</label>
    <input id="file-uploader" type="file" name="file" accept="image/*" multiple="true" required>

    <button id="btn-upload" type="submit">Upload</button>
</form>

我在表格中显示所有文件（上面未显示），并让用户可以从文件列表中删除项目，如下所示：

let fileList = new Array;
const fileUploader = this.document.getElementById('file-uploader');
let uniqueid = 1;

fileUploader.addEventListener('change', function () {

    for (let i = 0; i < fileUploader.files.length; i++) {
        let currFile = fileUploader.files[i];
        fileList[uniqueid] = currFile;

        // Removal and display code

        uniqueid++;
    }
});

这给我留下了包含所有所需文件的“FileList”类型的fileList。每当我上传file-uploader 时，只会使用最新/最近上传的文件，而不是全部。

拥有完整列表 - javascript 中是否有办法附加到 file-uploader 中包含的文件或将数据传递到我的烧瓶后端（werkzeug.datastructures.FileStorage 类型）的解决方法？

提前致谢:)

【问题讨论】：

标签： javascript file flask

【解决方案1】：

获得要上传的文件的完整列表后，您可以从 JavaScript 向 Flask 端点发出 POST 请求以存储文件。

用最小的形式

<form id="form-files">
    <input id="file-input" type="file" multiple=true />
    <button type="submit">Submit</button>
</form>

您可以拦截表单提交操作并将文件发送到 Flask 端点。 fileList 数组来自您的文件上传/删除逻辑。

var formFiles = document.getElementById('form-files');

formFiles.addEventListener('submit', function(e) {
    e.preventDefault();
    var formData = new FormData();
    var request = new XMLHttpRequest();
    for (var i = 0; i < fileList.length; i++) {
        formData.append('files[]', fileList[i]);
    }
    request.open('POST', '/upload');
    request.send(formData);
});

最后编写一个处理（存储）文件的烧瓶上传端点。

@app.route("/upload", methods=["POST"])
def upload():
    uploaded_files = request.files.getlist("file[]")
    # Store files

【讨论】：