javascript - 将 blob 添加到 dropzone.js 队列而不是文件

Question

我使用 dropzone.js 上传文件。但是，我的文件在上传前已经过预处理。最后我有一个 blob 我想上传。 不幸的是，只有 addFile() 方法可用，但没有 addBlob() 方法。我知道我可以像这样使用 File 构造函数:

new File([blob], 'filename', options)

但构造函数在 IE/Edge 中不可用。

有什么方法可以将 blob 附加到 dropzone.js 队列？

Answer 1

addFile() 可以直接与 blob 一起使用:

function dataURItoBlob(dataURI) {
  // http://stackoverflow.com/a/12300351/4578017
  var byteString = atob(dataURI.split(',')[1]);

  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  var blob = new Blob([ab], {type: mimeString});
  return blob;
}


$(() => {
  const options = {
    autoProcessQueue: false,
    url: "/file/post"
  };
  const myDropzone = new Dropzone( $('#dz').get(0), options);

  function addBlob(blob) {
    blob.name = 'myfilename.png'
    myDropzone.addFile(blob);
  }

  $('#preprocess').on('change', function() {
    const reader = new FileReader();
    reader.onload = () => {
      $('#data-uri').text(reader.result.slice(0, 64) + '...');
      addBlob(dataURItoBlob(reader.result));
    };
    reader.readAsDataURL(this.files[0]);
  });
})

#dz {
  height: 240px;
  width: 240px;
  background: #ccc;
}

<link href="https://github.com/enyo/dropzone/blob/master/dist/dropzone.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.github.com/enyo/dropzone/master/dist/dropzone.js"></script>
<input id="preprocess" type="file">
<pre id="data-uri"></pre>
<div id="dz"> dropzone.js </div>

File object 只是一种特定的 Blob , addFile() 不要求它是 File .