是否将FileList发送到Flask后端

Question

我想让用户在多个阶段上传多个文件，上传后将在我的烧瓶后端进行处理。因此，我的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类型(？

提前感谢：(

Answer 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);
});

最后编写一个flask上传端点来处理(存储(文件。

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