Failed to execute ‘readAsArrayBuffer‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob‘

Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type ‘Blob’

在vue中使用FileReader时遇到Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type 'Blob’的报错,尝试了new Int8Array、readAsArrayBuffer等方式却依旧没有解决。多次调试后发现可能是因为使用了element 上传功能,然后给fileReader.readAsArrayBuffer()传的参数对不上,传的参数中的raw才是需要的File对象

let file = this.file[0].raw // 其中的raw才是File对象

getFileMd5 (file) {
    return new Promise((resolve, reject) => {
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice;
      let chunks = Math.ceil(file.size / 200)
      let currentChunk = 0;
      let spark = new SparkMD5.ArrayBuffer();
      let fileReader = new FileReader();
      fileReader.onload = function (e) {
        spark.append(e.target.result);
        currentChunk++;
        if (currentChunk < chunks) {
          loadNext();
        } else {
          let _md5 = spark.end();
          resolve(_md5);
        }
      };
      function loadNext() {
        let start = currentChunk * 200;
        let end = start + 200;
        (end > file.size) && (end = file.size);
        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); // 这样才可以正常运行
      }
      loadNext();
    });
  }

在这里插入图片描述

直接使用原生的方法,获取的参数就是File对象

<input type="file" onchange="upload()">

function upload(e) {
  var e=window.event||event
  console.log(e.target.files[0])
}

在这里插入图片描述

你可能感兴趣的:(vue,js,javascript,vue.js)