addFile() 方法的 Dropzone js 数据

Question

我想不通 - 应该将哪些数据传递给 Dropzone.addFile() 以将已上传的文件添加到 dropzone 列表。

现在我有：

$.each(attachments[drop.data('name')], function (index, item) {
    let mock = {
        name: item.original_name,
        size: item.size,
        dataUrl: item.relative_url,
        type: item.mime_type
    };
    drop[0].dropzone.addFile(mock);
});

并有以下错误：

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
at Dropzone.createThumbnail (dropzone-amd-module.js:2025)
at Dropzone._processThumbnailQueue (dropzone-amd-module.js:1922)
at dropzone-amd-module.js:1907

Uncaught TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.
at Dropzone._uploadData (dropzone-amd-module.js:2514)
at dropzone-amd-module.js:2381
at dropzone-amd-module.js:2535
at Dropzone.transformFile (dropzone-amd-module.js:689)
at _loop (dropzone-amd-module.js:2532)
at Dropzone._transformFiles (dropzone-amd-module.js:2541)
at Dropzone.uploadFiles (dropzone-amd-module.js:2293)
at Dropzone.processFiles (dropzone-amd-module.js:2198)
at Dropzone.processFile (dropzone-amd-module.js:2166)
at Dropzone.processQueue (dropzone-amd-module.js:2155)

我在 mock 数组中遗漏了什么才能使它正常工作？

Answer 1

从 Github 项目中，您可以看到 addFile 实现：https://github.com/enyo/dropzone/blob/08b9e0a763b54a685404dea523a9c54242fbe1b9/dist/dropzone.js#L1812

它没有提供任何文档，但如果您查看此函数内部，它们使用的是预定义的属性（特别是大小属性），这让我想到了 Blob javascript对象：https://developer.mozilla.org/en-US/docs/Web/API/Blob

编辑：错误还提示您使用 Blob 类型，所以预测是正确的哈哈哈

EDIT2：File Javascript 对象继承自 Blob 对象，因此您也可以使用 File 类型

Answer 2

我使用了一些代码来显示以前上传的图片。希望对你有帮助。

/**
 * Display images, modify this function according to your needs
 */
function displayOldImage() {
 const data = JSON.parse($('#oldImages').val());
 let myDropzone = this;
 $.each(data, function (key, value) {
    const mockFile = {name: value.name, size: value.size};
    myDropzone.files[key] = value.name;
    myDropzone.options.addedfile.call(myDropzone, mockFile);
    myDropzone.options.thumbnail.call(myDropzone, mockFile, value.url);
       mockFile.previewElement.classList.add('dz-success');
       mockFile.previewElement.classList.add('dz-complete');
    });
 }

var dropzoneUploader = new Dropzone("div#dropzone-file-input", {
     url: JS_BASE_URL + 'gallery/photo/add-file',
     parallelUploads: 10,
     addRemoveLinks: true,
     maxFiles: 25,
     maxFilesize: 2,
     dictDefaultMessage: message,
     acceptedFiles: 'image/jpeg, image/jpg, image/png',
     preventDuplicates: true,
     init: displayOldImage, //here is the function call for your requirements
 });

addFile() 方法的 Dropzone js 数据

Dropzone js data for addFile() method

javascript

dropzone.js