Question

我正在尝试使用Flask，HTML和JS上传多个文件。但是，当我尝试在Flask路线中检索其名称时，列表为空。

这是烧瓶路径（命名为上载）：

@app.route("/upload", methods=["POST", "GET"])
def upload():
    if request.method == "POST":
        return str(request.files)

然后在mu upload.html中，我有以下脚本：

<form action="" method="POST" enctype="multipart/form-data">
        <div style="padding-left: 7%">
            <div class="file-upload">
                <input class="file-upload__input" type="file" name="files" id="files" multiple>
                <button class="file-upload__button" type="button">Choose File(s)</button>
                <span class="file-upload__label" style="color: white">No file(s) selected</span>
            </div>
            <script>
                Array.prototype.forEach.call(
                    document.querySelectorAll(".file-upload__button"),
                    function(button) {
                        const hiddenInput = button.parentElement.querySelector(
                            ".file-upload__input"
                            );
                        const label = button.parentElement.querySelector(".file-upload__label");
                        const defaultLabelText = "No file(s) selected";

            // Set default text for label
            label.textContent = defaultLabelText;
            label.title = defaultLabelText;

            button.addEventListener("click", function() {
                hiddenInput.click();
            });

            hiddenInput.addEventListener("change", function() {
                const filenameList = Array.prototype.map.call(hiddenInput.files, function(
                    file
                    ) {
                    return file.name;
                });

                label.textContent = filenameList.join(", ") || defaultLabelText;
                label.title = label.textContent;
            });
        }
        );
    </script>
<div style="padding-top: 75px; padding-left: 7%; padding-bottom: 10%">
    <input type="submit" value="Save to Cloud" name="submit" class="file-upload__button">
</div >
</form>

当我启动它并且方法是POST时，我得到以下输出：

请问如何获取上载文件的名称？

这就是我的界面：

和

更新：

当我在print(request.files)之前进行return时会得到：

ImmutableMultiDict([('files', <FileStorage: 'test.csv' ('text/csv')>)])

其中test.csv确实是文件的正确名称。

如果您对我做错了什么有任何想法，请告诉我

烧瓶上传多个文件

0 个答案: