file-fragment-upload/dist/file-fragment-upload.esm.js

文件分片上传 获取文件hash值 文件分片

import { useCallback, createElement } from 'react';
import { useDropzone } from 'react-dropzone';
import SparkMD5 from 'spark-md5';

/**
 * 获取文件的hash值，即md5值
 * @param file 要分割的文件对象
 * @param chunkSize 分片大小，默认每片大小为为3M
 * @returns
 */

var getFileHash = function getFileHash(file, chunkSize) {
  if (chunkSize === void 0) {
    chunkSize = 3 * 1024 * 1024;
  }

  var blobSlice = File.prototype.slice;
  return new Promise(function (resolve, reject) {
    var chunks = Math.ceil(file.size / chunkSize);
    var currentChunk = 0;
    var spark = new SparkMD5.ArrayBuffer();
    var fileReader = new FileReader();

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

    fileReader.onload = function (e) {
      if (e.target && e.target.result) {
        spark.append(e.target.result); // Append array buffer

        currentChunk += 1;

        if (currentChunk < chunks) {
          loadNext();
        } else {
          var result = spark.end(); // 如果单纯的使用result 作为hash值的时候, 如果文件内容相同，而名称不同的时候
          // 想保留两个文件无法保留。所以把文件名称加上。

          var sparkMd5 = new SparkMD5();
          sparkMd5.append(result);
          sparkMd5.append(file.name);
          var hexHash = sparkMd5.end();
          resolve(hexHash);
        }
      }
    };

    fileReader.onerror = function (err) {
      reject(err);
    };

    loadNext();
  })["catch"](function (err) {
    console.error(err);
  });
};
/**
 *
 * @param startByte 分片起始位置
 * @param endByte 分片结束位置
 * @returns
 */


var getChunk = function getChunk(file, startByte, endByte) {
  // @ts-ignore
  var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
  var chunk = blobSlice.call(file, startByte, endByte);
  return chunk;
};

var App = function App(props) {
  var onDrop = useCallback(function (files) {
    props.uploadFiles(files);
  }, []);

  var _useDropzone = useDropzone({
    onDrop: onDrop
  }),
      getRootProps = _useDropzone.getRootProps,
      getInputProps = _useDropzone.getInputProps;

  return createElement("div", Object.assign({}, getRootProps()), createElement("input", Object.assign({
    type: "file",
    style: {
      display: 'none'
    }
  }, getInputProps())), props.children);
};

export default App;
export { getChunk, getFileHash };
//# sourceMappingURL=file-fragment-upload.esm.js.map