Dropzone.js 添加附加数据时不发送文件

Question

我正在尝试将 dropzone.js 集成到一个更大的表单中，并将整个表单与上传文件一起发送。但是我只在我的上传端点上收到额外的数据，而不是我用 dropzone.js.

上传的文件

这是我的html表格

            <form enctype="multipart/form-data" method="POST">
                <div class="dropzone mb-2" id="myDropzone" style="width: 400px;">
                    <div class="dz-message needsclick">
                        <button type="button" class="dz-button">
                            Drop files here or click to upload.
                        </button>
                    </div>
                </div>
                <div>
                    <button type="button" class="button" onclick="toggleOptions()">
                        Show options
                    </button>
                    <button type="submit" id="submit-all" class="button is-primary">
                        Upload
                    </button>
                </div>
                <div id="options" class="container is-hidden">
                    <div class="box mt-3">
                        <div class="field">
                            <div class="control">
                                <label class="checkbox">
                                    <input type="checkbox" id="additional-data">
                                    check me or don't
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

这是我的 dropzone 配置

window.onload = function() {
  $("#myDropzone").dropzone({
    url: 'upload',
    maxFilesize: 2000,
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    createImageThumbnails: false,
    init: function() {
        dzClosure = this;

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(file, xhr, form) {
            form.append("data", jQuery("#additional-data").val());
        });
        this.on('error', function(files, response) {
          alert(response);
        });
    }
  })
}

按下上传按钮后，表单被发送到 /upload 端点，但表单仅包含复选框“数据”参数，没有文件被发送。我在 javascript 控制台和拖放区内没有收到任何错误，上传似乎完成得很好。

我的后端接收表单，如下所示：

@upload.route('/upload', methods=["POST"])
@login_required
def upload_endpoint():
    print("upload endpoint has been hit")
    print(request.form)
    uploaded_file = request.form.get('file')
    print(uploaded_file)
    return redirect(url_for('upload.main_screen')

从我这里的 3 个打印语句中我得到：

upload endpoint has been hit
ImmutableMultiDict([('data', 'on')])
None

所以我想知道，为什么文件没有被传输？我需要更改什么才能传输它？

Answer 1

答案出奇的简单：

我必须在后端使用 request.files 而不是 request.form 来访问文件。

Dropzone.js 添加附加数据时不发送文件

Dropzone.js not sending the file when adding additional data

javascript

dropzone.js