addFile() 方法的 Dropzone js 数据答案

【问题标题】：Dropzone js data for addFile() methodaddFile() 方法的 Dropzone js 数据
【发布时间】：2019-12-30 11:30:49
【问题描述】：

我不知道 - 应该将哪些数据传递给 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 数组中遗漏了什么以使这个东西正常工作？

【问题讨论】：

@OlegShaktov 你解决了吗？
@AabirHussain 是的，但以不同的方式，我也做了很多支持逻辑来识别新添加的文件和删除已上传文件的可用性。

标签： javascript dropzone.js

【解决方案1】：

我使用了一些代码来显示以前上传的图像。我希望这可以帮助你。

/**
 * 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
 });

【讨论】：

【解决方案2】：

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

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

编辑：错误还建议您使用 Blob 类型，因此预测是正确的哈哈哈

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

【讨论】：

A无论如何都做不到，我用另一种方法做了我想要的。
在投票前检查一下：stackoverflow.com/questions/24488985/…
@OlegShakhov 然后将它作为社区的回答者发布在这里？