使用 Dropzone.js 上传 BLOB/ArrayBuffer答案

【问题标题】：Uploading BLOB/ArrayBuffer with Dropzone.js使用 Dropzone.js 上传 BLOB/ArrayBuffer
【发布时间】：2015-03-26 12:24:37
【问题描述】：

使用 SharePoint 2013 REST API，我成功地将文件（例如 .docx 或 .png）上传到使用 Dropzone.js 的文档库内的文件夹中。我有一个函数来初始化我的 dropzone，如下所示：

myDropzone = new Dropzone("#dropzone");

myDropzone.on("complete", function (file) {
    myDropzone.removeFile(file);
});

myDropzone.options.autoProcessQueue = false;

myDropzone.on("addedfile", function (file) {
    $('.dz-message').hide();
    myDropzone.options.url = String.format(
    "{0}/{1}/_api/web/getfolderbyserverrelativeurl('{2}')/files" +
    "/add(overwrite=true, url='{3}')",
    _spPageContextInfo.siteAbsoluteUrl, _spPageContextInfo.webServerRelativeUrl, folder.d.ServerRelativeUrl, file.name);
});

myDropzone.options.previewTemplate = $('#preview-template').html();

myDropzone.on('sending', function (file, xhr, fd) {
    xhr.setRequestHeader('X-RequestDigest', $('#__REQUESTDIGEST').val());
});

我遇到的问题是，上传完成后，几乎所有文件（PDF 是唯一的不是）都显示为损坏的文件。这很可能是因为 SharePoint 要求上传的文件作为 ArrayBuffer 发送。 MSDN Source

使用常规的 Ajax POST 和上述方法将文件转换为数组缓冲区，我已成功将内容上传到 SharePoint 文档库，而没有损坏。现在，我想做同样的事情，但不必省略 Dropzone.js 的使用，它为功能界面添加了非常好的触感。

我已经研究过修改dropzone.js 中的uploadFiles() 方法，但这似乎很激烈。我还试图弄清楚我是否可以在options 中使用accept 选项，但这似乎是一个死胡同。

与解决方案最相似的两个问题是下面链接的问题，第一个似乎适用于我的情况，但同时看起来不像我想要使用的那样“干净”。

第二个是上传Base64编码的图片。

1 - Simulating XHR to get ArrayBuffer

2 - Upload image as Base64 with Dropzone.js

所以我的问题是，当一个文件被添加时，我如何拦截它，将数据转换为一个数组缓冲区，然后使用 Dropzone.js 发布它？

【问题讨论】：

我遇到了类似的问题...你能告诉我你最后做了什么吗..？

标签： rest sharepoint binaryfiles dropzone.js

【解决方案1】：

这是对我自己问题的较晚回答，但这是我们最终寻求的解决方案。

我们保留dropzone.js 只是为了美观的界面和一些帮助功能，但我们决定使用$.ajax() 进行实际文件上传。

我们使用 HTML5 FileReader 将文件作为数组缓冲区读取

var reader = new FileReader();
reader.onloadend = function(e) {
    resolve(e.target.result);
};
reader.onerror = function(e) {
    reject(e.target.error);
};
reader.readAsArrayBuffer(file);

然后将其作为 data 参数传递给 ajax 选项。

【讨论】：

你使用dropzone的拖放功能了吗？如果是，您是如何将文件传递给读者的？还是您示例中的文件是dropzone的文件参数？
我在拖放区中添加了一个事件监听器并使用files = evt.dataTransfer.files; 访问文件，所以它不是来自dropzone.js 而是纯javascript。

【解决方案2】：

我最近遇到了这个确切的问题，因此对 Dropzone 库进行了一些调查。

我设法纠正了 SharePoint/Office 365 的上传过程，方法是猴子修补 Dropzone.prototype.submitRequest() 方法以修改它以使用我自己的 getArrayBuffer 方法，该方法使用 FileReader API 返回一个 ArrayBuffer，然后通过Dropzone 生成 XMLHttpRequest。

这使我能够继续使用 Dropzone API 的功能。

仅针对单次自动上传进行了测试，因此需要进一步调查多文件上传。

猴子补丁

Dropzone.prototype.submitRequest = function (xhr, formData, files) {
    getArrayBuffer(files[0]).then(function (buffer) {
        return xhr.send(buffer);
    });
};

getArrayBuffer

function getArrayBuffer(file) {
    return new Promise(function (resolve, reject) {
        var reader = new FileReader();

        reader.onloadend = function (e) {
            resolve(e.target.result);
        };
        reader.onerror = function (e) {
            reject(e.target.error);
        };
        reader.readAsArrayBuffer(file);
    });
}

文件上传到 SharePoint 后，我使用 Dropzone 'success' 事件使用元数据更新文件。

【讨论】：