javascript - Dropzone.js 添加其他数据时不发送文件
问题描述
我正在尝试将 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 控制台和 dropzone 内没有收到任何错误,上传似乎完成得很好。
我收到表单的后端如下所示:
@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
所以我想知道,为什么文件没有被传输?我必须改变什么才能传输它?
解决方案
答案出人意料地简单:
request.files
我必须使用而不是request.form
在我的后端访问文件。
推荐阅读
- c - 堆缓冲区溢出试图重新分配内存。C语言
- angular - 由于不允许的 MIME 类型(“text/html”),Nginx 被阻止。角 8
- python - tkinter 不需要的功能覆盖
- azure-active-directory - Auth0 获取 powerBI 令牌
- r - SummarySE() 函数抛出错误:无法重命名不存在的列。x 列 `len` 不存在
- google-apps-script - 移动文件时,我的脚本首先选择哪个文件?
- r - 使用 gsub() 替换除某些子字符串之后的所有数字
- sql - 只需 1 次查询即可选择每位学生最近购买的详细信息?
- node.js - MS BotFramework V4 - 忽略用户输入
- elasticsearch - Elasticsearch 查询根据条件返回“每个文档”的最新版本