我正在尝试配置dropzone,以便我可以使用ngx-dropzone-wrapper在一个请求中上传2个文件。
private config: DropzoneConfigInterface = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 2,
maxFiles: 2,
maxFilesize: 500,
url: environment.apiEndpoint + '/the/endpoint',
acceptedFiles: 'image/jpeg',
resizeWidth: 500,
resizeMethod: 'contain',
resizeQuality: 1.0,
timeout: 30000,
addRemoveLinks: true
};
// This allows me to access dropzone API
get dropzone() {
return this.dropzonComponentRef.directiveRef.dropzone();
}
我在第二个文件被删除时触发上传:
onFileAdded(file: File) {
if (this.dropzone.files.length === this.config.maxFiles) {
// All files have been dropped we can submit
this.dropzone.processQueue();
}
}
此回调按预期调用两次。
如果我这样做,我的文件不会添加到formdata。我不知道它是否正常,但我可以在另一个回调中手动添加它们:
onSendingMultiple(args: any) {
const formData = args[2];
// We are not using the file array returned in args[0]
// because in contains only one file for some reason
const files = this.dropzone.files;
formData.append('firstPic', files[0], 'firstPic.jpg');
formData.append('secondPic', files[1], 'secondPic.jpg');
}
这会将文件正确添加到formdata中,但formdata中还有第三项,我想摆脱它。我不知道它来自哪里。
我检查了onSendingMultiple()回调中的formdata内容,此时此项不是formdata的一部分。
我该怎样摆脱它?或者更好的是,我怎样才能避免它被生成?
答案 0 :(得分:0)
因此,我无需自己将文件添加到formdata中。
我注意到了:
this.dropzone.processQueue();
在 onFileAdded()内部回调将丢弃formdata的最后一个文件(这就是为什么我最终将文件添加到formdata中的原因)。
我现在从 onMaxFilesReached()回调中调用它,我的文件已正确添加到formdata。