js大文件切片上传+断点续传

  //文件路径
  var filePath = "file://upload/test.png";
  //获取最后一个.的位置
  var index= filePath.lastIndexOf(".");
  //获取后缀
  var ext = filePath.substr(index+1);
  //输出结果
  console.log(ext);
  // 输出： png

  <template>
  <div>
    <input
      type="file"
      id="inputFile"
      @change="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    check(headers) {
      return (buffers, options = { offset: 0 }) =>

      headers.every(

      (header, index) => header === buffers[options.offset + index]

      );
    },
    async handleChange(event) {
      const file = event.target.files[0];

      // 以PNG为例，只需要获取前8个字节，即可识别其类型
      const buffers = await this.readBuffer(file, 0, 8);

      const uint8Array = new Uint8Array(buffers);

      const isPNG = this.check([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);

      // 上传test.png后，打印结果为true
      console.log(isPNG(uint8Array))

    },
    readBuffer(file, start = 0, end = 2) {
      // 获取文件的二进制数据，因为我们只需要校验前几个字节即可，所以并不需要获取整个文件的数据
        return new Promise((resolve, reject) => {
          const reader = new FileReader();

          reader.onload = () => {
            resolve(reader.result);
          };

          reader.onerror = reject;

          reader.readAsArrayBuffer(file.slice(start, end));
        });
    }
  }
};
</script>

  // upload.js

  // 创建一个worker对象
  const worker = new worker('worker.js')
  // 向子线程发送消息，并传入文件对象和切片大小，开始计算分割切片
  worker.postMessage(file, DefualtChunkSize)

  // 子线程计算完成后，会将切片返回主线程
  worker.onmessage = (chunks) => {
    ...
  }

  // worker.js

  // 接收文件对象及切片大小
  onmessage (file, DefualtChunkSize) => {
    let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
      chunks = Math.ceil(file.size / DefualtChunkSize),
      currentChunk = 0,
      spark = new SparkMD5.ArrayBuffer(),
      fileReader = new FileReader();

    fileReader.onload = function (e) {
      console.log('read chunk nr', currentChunk + 1, 'of');

      const chunk = e.target.result;
      spark.append(chunk);
      currentChunk++;

      if (currentChunk < chunks) {
        loadNext();
      } else {
        let fileHash = spark.end();
        console.info('finished computed hash', fileHash);
        // 此处为重点，计算完成后，仍然通过postMessage通知主线程
        postMessage({ fileHash, fileReader })
      }
    };

    fileReader.onerror = function () {
      console.warn('oops, something went wrong.');
    };

    function loadNext() {
      let start = currentChunk * DefualtChunkSize,
        end = ((start + DefualtChunkSize) >= file.size) ? file.size : start + DefualtChunkSize;
      let chunk = blobSlice.call(file, start, end);
      fileReader.readAsArrayBuffer(chunk);
    }

    loadNext();
  }

// 检查是否已存在相同文件
   async function checkAndUploadChunk(chunkList, fileMd5Value) {
    const requestList = []
    // 如果不存在，则上传
    for (let i = 0; i < chunkList; i++) {
      requestList.push(upload({ chunkList[i], fileMd5Value, i }))
    }

    // 并发上传
    if (requestList?.length) {
      await Promise.all(requestList)
    }
  }

 // 上传chunk
  function upload({ chunkList, chunk, fileMd5Value, i }) {
    current = 0
    let form = new FormData()
    form.append("data", chunk) //切片流
    form.append("total", chunkList.length) //总片数
    form.append("index", i) //当前是第几片     
    form.append("fileMd5Value", fileMd5Value)
    return axios({
      method: 'post',
      url: BaseUrl + "/upload",
      data: form
    }).then(({ data }) => {
      if (data.stat) {
        current = current + 1
        // 获取到上传的进度
        const uploadPercent = Math.ceil((current / chunkList.length) * 100)
      }
    })
  }