使用 Dropzone.js 上传 BLOB/ArrayBuffer [英] Uploading BLOB/ArrayBuffer with Dropzone.js

问题描述

使用 SharePoint 2013 REST API，我成功地使用 Dropzone.js 将文件(例如 .docx 或 .png )上传到文档库内的文件夹.我有一个函数，可以按如下方式初始化我的 dropzone:

myDropzone = new Dropzone("#dropzone");myDropzone.on(完成"，功能(文件){myDropzone.removeFile(file);});myDropzone.options.autoProcessQueue = false;myDropzone.on(添加文件"，函数(文件){$('.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 源

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

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

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

第二个用于上传带有 Base64 编码的图像.

1 - 模拟 XHR 获取 ArrayBuffer

2 - 使用 Dropzone.js 以 Base64 格式上传图片

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

解决方案

这是我自己问题的一个迟到的答案，但它是我们最终寻求的解决方案.

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

我们使用 HTML5 FileReader

作为数组缓冲区读取文件

var reader = new FileReader();reader.onloadend = 函数(e){解决(e.target.result)；};reader.onerror = 函数(e){拒绝(e.target.error)；};reader.readAsArrayBuffer(文件)；

然后将其作为 data 参数在 ajax 选项中传递.

Using SharePoint 2013 REST API, I'm successfully uploading files, such as .docx or .png's to a folder inside a document library using Dropzone.js. I have a function where I initialize my dropzone as follows:

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());
});

The problem I've encountered is that almost all the files (PDF being the only one not) are shown as corrupt files when the upload is done. This is most likely due to the fact SharePoint requires that the file being uploaded is sent as an ArrayBuffer. MSDN Source

Using a regular Ajax POST and the method above to convert the file to an arraybuffer, I've successfully uploaded content to the SharePoint document library, without them getting corrupt. Now, I would like to do the same but without having to omit the use of Dropzone.js, that adds a very nice touch to the interface of the functionality.

I've looked into modifying the uploadFiles()-method in dropzone.js, but that seems drastic. I've also tried to figure out whether or not I can use the accept option in options but that seems like a dead end.

The two most similar problems with solutions are the ones linked below, where the first seems to be applicable in my case, but at the same time looks less "clean" than I would want to use.

The second one is for uploading images with a Base64 encoding.

1 - Simulating XHR to get ArrayBuffer

2 - Upload image as Base64 with Dropzone.js

So my question in a few less words is, when a file is added, how do I intercept this, convert the data to an arraybuffer, and then POST it using Dropzone.js?

解决方案

This is a late answer to my own question, but it is the solution we went for in the end.

We kept dropzone.js just for the nice interface and some help functions, but we decided to do the actual file upload using $.ajax().

We read the file as an array buffer using the 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);

and then pass it as the data argument in the ajax options.

这篇关于使用 Dropzone.js 上传 BLOB/ArrayBuffer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！