前端大文件切片上传

1import SparkMD5 from 'spark-md5';
2import { Observable } from 'rxjs';
3
4export interface SlicedFile {
5  md5: string;
6  chunks: Blob[];
7}
8
9export function fileSlice(file: File, sliceSize: number/* byte */) {
10  return new Observable<[number, SlicedFile | null]>(subscriber => {
11    const spark = new SparkMD5.ArrayBuffer();
12    const maxCount = Math.ceil(file.size / sliceSize);
13    const chunks: Blob[] = [];
14    const fileReader = new FileReader();
15    fileReader.onload = (e) => {
16      spark.append(e.target!.result as ArrayBuffer);
17      loadNext();
18    };
19    fileReader.onerror = (err) => {
20      subscriber.error(err);
21    };
22    const loadNext = () => {
23      if (chunks.length < maxCount) {
24        const start = chunks.length * sliceSize;
25        subscriber.next([Math.min(1, start / file.size), null]);
26        const end = Math.min(start + sliceSize, file.size);
27        const blob = file.slice(start, end);
28        fileReader.readAsArrayBuffer(blob);
29        chunks.push(blob);
30      } else {
31        subscriber.next([1, { md5: spark.end(), chunks }]);
32        subscriber.complete();
33      }
34    };
35    loadNext();
36    return {
37      unsubscribe() {
38        fileReader.abort();
39      },
40    };
41  });
42}

1/**
2 * @type {SlicedFile}
3 */
4var slicedFile;
5(async () => {
6  for (let i = 0; i < slicedFile.chunks.length; i += 1) {
7    const formData = new FormData();
8    formData.append('file', slicedFile.chunks[i]);
9    await fetch(`/upload?md5=${slicedFile.md5}&index=${i}`, {
10      body: formData
11    });
12  }
13})();