vue使用饿了么文件上传 如何同步获取hash值

在 Vue 中使用饿了么的 Upload 组件进行文件上传，并同步获取文件哈希值（通常是 MD5 或者 SHA），你可以按照以下步骤操作：

1. 首先，安装`vue-upload-file`库，它是一个轻量级的文件上传组件，支持多种浏览器及兼容异步处理：

   npm install vue-upload-file

2. 引入并配置组件：

在你的 Vue 文件中，引入 `VueUploadFile` 并注册插件：

   import VueUploadFile from 'vue-upload-file';

   Vue.use(VueUploadFile);

3. 使用 Upload 组件：

在需要上传的表单或元素上应用 Upload 组件，设置一个自定义事件处理器来处理上传成功后的回调：

   <template>
     <div>
       <el-upload
         ref="upload"
         :action="uploadUrl"
         :on-success="handleSuccess"
         :auto-upload="false"
         multiple
       >
         <el-button type="primary" size="small">选择文件</el-button>
       </el-upload>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         uploadUrl: '',
         fileHash: null,
       };
     },
     methods: {
       handleSubmit(file) {
         // 获取文件内容并计算MD5或SHA
         const fileContent = new FileReader().readAsArrayBuffer(file.file).then(buffer => {
           return window.crypto.subtle.digest('sha256', buffer); // 示例：替换为 sha256 或 md5
         });

         // 当文件上传成功后，文件内容计算完成
         fileContent.then(hash => {
           this.fileHash = hash;
           console.log('文件哈希值:', this.fileHash);
         });
       },
       handleSuccess(response, file, fileList) {
         this.handleSubmit(file);
       },
     },
   };
   </script>

4. 在 `handleSuccess` 回调中，我们暂停了自动上传 (`auto-upload=false`)，并在用户手动触发提交时，读取文件内容并计算哈希。