vue3的el-upload上传文件 并计算文件hash

在 Vue3 中，`element-ui` 的 `el-upload` 组件可以方便地处理文件上传操作。要计算文件的哈希值（通常用于检查文件内容是否更改），你可以结合使用 `FileReader` API 和 `md5` 或 `crypto-js` 这样的库来实现。以下是基本步骤：

1. 首先，在模板中设置 `el-upload` 组件：

<template>
  <el-upload
    ref="upload"
    action="你的上传服务器地址"
    :on-change="handleChange"
    :file-list="fileList"
  >
    <el-button>点击选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传不超过5M的文件</div>
  </el-upload>
</template>

2. 在 `script` 部分引入库，这里以 `crypto-js` 为例：

import CryptoJS from 'crypto-js';

3. 定义 `handleChange` 方法，当文件发生变化时触发：

export default {
  methods: {
    handleChange(file) {
      const fileReader = new FileReader();
      fileReader.onload = (event) => {
        const fileContent = event.target.result;
        const md5Hash = CryptoJS.MD5(fileContent).toString();
        this.fileHashes[file.name] = md5Hash; // 更新文件哈希对象
        console.log(`文件 ${file.name} 的MD5哈希为：${md5Hash}`);
      };
      fileReader.readAsArrayBuffer(file); // 读取文件二进制数据
    },
  },
  data() {
    return {
      fileList: [],
      fileHashes: {}, // 初始化文件哈希对象
    };
  },
};

4. 现在每次文件上传后，都会更新 `fileList` 并计算文件的 MD5 哈希。