将blob添加到dropzone.js队列而不是file

Add blob to dropzone.js queue instead of file

本文关键字：file 队列 js blob 添加 dropzone      更新时间：2023-09-26

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

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

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

是否有办法将blob附加到dropzone.js队列?

addFile()可以直接用于blobs: 

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对象只是Blob的一种特殊类型，并且addFile()不要求它是File

相关文章：