Vue通过spark-md5.js上传本地md5文件

女爷i 2022-12-29 14:18 189阅读 0赞

参考地址：[https://www.codercto.com/a/19695.html][https_www.codercto.com_a_19695.html]

[https://www.imooc.com/article/306531?block\_id=tuijian\_wz][https_www.imooc.com_article_306531_block_id_tuijian_wz]

先安装：

npm i spark-md5

Vue 代码：用的第二种

在input的onchange事件处理程序中调用doNormalTest或doIncrementalTest方法，并将input元素的dom节点传入就可以了

import SparkMD5 from "spark-md5";
    
    <div class="upload">
          <input
          type="file"
          id="sourceFile"
          placeholder="选择文件"
          ref="avatarInput"
          @change="changeImage()"
          accept="*"
          multiple="multiplt"
          />
        <span>{
       { clickUpload }}</span>
    </div>
    
    js:
    //上传图片
        changeImage(e) {
          var that = this;
          var files = that.$refs.avatarInput.files;
          that.doIncrementalTest(files);
          // 文件上传服务器
          that.File = files[0];
          that.clickUpload = files[0].name;
          document.getElementById("sourceFile").value = "";//可以重新上传
        },
    
    doIncrementalTest(input) {
          var _this = this;
          var running = false; //running用于判断是否正在计算md5
          //这里假设直接将文件选择框的dom引用传入
          if (running) {
            return;
          }
          //这里需要用到File的slice( )方法，以下是兼容写法
          var blobSlice =
              File.prototype.slice ||
              File.prototype.mozSlice ||
              File.prototype.webkitSlice,
            file = input[0],
            chunkSize = 2097152, // 以每片2MB大小来逐次读取
            chunks = Math.ceil(file.size / chunkSize),
            currentChunk = 0,
            spark = new SparkMD5(), //创建SparkMD5的实例
            time,
            fileReader = new FileReader();
          fileReader.onload = function(e) {
            console.log("Read chunk number (currentChunk + 1) of  chunks ");
            spark.appendBinary(e.target.result); // append array buffer
            currentChunk += 1;
            if (currentChunk < chunks) {
              loadNext();
            } else {
              running = false;
              console.log("Finished loading!");
              let str = spark.end();
              console.log("str", str);
              _this.md5 = str;//赋值md5
              return spark.end(); // 完成计算，返回结果
            }
          };
          fileReader.onerror = function() {
            running = false;
            console.log("something went wrong");
          };
          function loadNext() {
            var start = currentChunk * chunkSize,
              end = start + chunkSize >= file.size ? file.size : start + chunkSize;
            fileReader.readAsBinaryString(blobSlice.call(file, start, end));
          }
          running = true;
          loadNext();
        //   console.log("spark============", spark);
        //   console.log("*************", spark.end());
        },

**首先第一种方法：**

**第二种方法：**

接下来你只要在input的onchange事件处理程序中调用doNormalTest或doIncrementalTest方法，并将input元素的dom节点传入就可以了

### 下载： ###

最后，如果你需要这个 [工具][Link 1] 可以通过npm直接安装，

npm i spark-md5

或者到作者的github上直接下载：

[github.com/satazor/js-…][github.com_satazor_js-]

[https_www.codercto.com_a_19695.html]: https://www.codercto.com/a/19695.html
[https_www.imooc.com_article_306531_block_id_tuijian_wz]: https://www.imooc.com/article/306531?block_id=tuijian_wz
[Link 1]: http://www.codercto.com/tool.html
[github.com_satazor_js-]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fsatazor%2Fjs-spark-md5