标签：文件 vue index element promise file CryptoJs sha256

这个依然需要插件crypto-js

首先下载引入

import CryptoJs from "crypto-js";

话不多说直接上代码，首先是element的上传

         <el-upload
              class="upload-demo"
              drag
              :http-request="calculate"
              action=""
              :limit="1"
              :file-list="fileList"
              :on-exceed="_change"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>

其次定义方法

function hashFileInternal(file, alog) {
        // 指定块的大小，这里设置为20MB,可以根据实际情况进行配置
        const chunkSize = 2000 * 1024 * 1024;
        let promise = Promise.resolve();
        // 使用promise来串联hash计算的顺序。因为FileReader是在事件中处理文件内容的，必须要通过某种机制来保证update的顺序是文件正确的顺序
        for (let index = 0; index < file.size; index += chunkSize) {
          promise = promise.then(() =>
            hashBlob(file.slice(index, index + chunkSize))
          );
        }

        /**
         * 更新文件块的hash值
         */
        function hashBlob(blob) {
          return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = ({ target }) => {
              const wordArray = CryptoJs.lib.WordArray.create(target.result);
              // 增量更新计算结果
              alog.update(wordArray);
              resolve();
            };
            reader.readAsArrayBuffer(blob);
          });
        }

        // 使用promise返回最终的计算结果
        return promise.then(() => encHex.stringify(alog.finalize()));
      }

      // 同时计算文件的sha256和md5,并使用promise返回
      return Promise.all([
        hashFileInternal(file, CryptoJs.algo.SHA256.create()),
        hashFileInternal(file, CryptoJs.algo.MD5.create()),
      ]).then(([sha256, md5]) => {
        this.filehash = sha256;
      });
    },

最后调用方法

calculate(param) {
      this.hashFile(param.file).then();
    },

然后就成功解决了压缩包编码错误

标签：文件,vue,index,element,promise,file,CryptoJs,sha256
来源： https://www.cnblogs.com/wcq520/p/15184212.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。