vue+element-ui前端上传图片到七牛云计算图片的md5以图片的md5命名上传

之所以计算图片的md5 是同一张图片无论你该什么名字 md5值不会变减少服务器重复储存同一张图片

1.上传图片到七牛云 并且计算图片的md5 这样同样的图片的md5是同一个就不会有重名问题 纯前端

2.我们用的是element-ui的上传组件

3.用的加密方法是用的 crypto-js 三方插件的md5加密

当我们上传图片的 时候第一步走的是 before-upload 所返回的方法 在这个方法里面我们file对象操作完之后就会进入我们的

before-upload对应的函数里面作

<template>
  <div>
    <el-upload
      ref="uploadRef"
      action=""
      :auto-upload="true"
      :multiple="true"
      list-type="picture"
      :file-list="fileList"
      :show-file-list="true"
      :http-request="uploadQiniu"
      :before-upload="beforePicUpload"
      :on-change="changeUpload"
      :on-remove="removeFile"
      drag
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-button size="small" type="primary" @click="saveuploadImage"
      >上传</el-button
    >
  </div>
</template>

<script>
import CryptoJS from "crypto-js";
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      fileList: [],
      submitImgList: [], //提交数据
    };
  },
  mounted() {},
  methods: {
    // 保存提交图片
    saveuploadImage() {
      let imageslist = this.fileList.map((item) => {
        return this.submitImgList.filter((el) => el.uid == item.uid)[0].md5name;
      });
      let params = {
        orderId: this.currentRow.orderId,
        images: imageslist,
      };
      console.log(params);
      return;
      uploadImage(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "上传成功",
          });
        } else {
          this.$message({
            type: "warning",
            message: res.data,
          });
        }
      });
    },
    //图片校验
    beforePicUpload(file, fileList) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
          const md5 = this.calculateMD5(e.target.result);
          let name = `upload/${md5}.${file.type.split("/")[1]}`;
          file.md5name = name;
          resolve(file);
        };
        reader.onerror = (error) => {
          reject(error);
        };
        reader.readAsArrayBuffer(file);
      })
        .then((file) => {
          return file;
        })
        .catch((error) => {
          console.error(error);
        });
    },

    // 获取七牛云token
    getQnyToken() {
      return new Promise((resolve, reject) => {
        getQnyToken().then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("失败");
          }
        });
      });
    },
    changeUpload(file, fileList) {
      this.fileList = fileList;
    },
    removeFile(file, fileList) {
      //移除图片
      this.fileList = fileList;
    },
    //上传七牛云
    uploadQiniu(request) {
      return;
      this.handleUpload(request)
        .then((res) => {
          if (res) {
            console.log("success", res);
          } else {
            this.$message.error({
              message: "图片上传失败,请重新上传",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          this.$message.error({
            message: `图片上传失败${err}`,
            duration: 2000,
          });
        });
    },
    handleUpload(request) {
      let key = request.file.md5name;
      const promise = new Promise((resolve, reject) => {
        let token =
          "G4yrHKm6Ah2kYTNzpHnu8Fcef-mdElsmEri8K3ua:7WR_TAWJUUxkU_JfaJKOawJYEOs=:eyJzY29wZSI6InBhaXBhaXBpLXN0YXRpYyIsImRlYWRsaW5lIjoxNjk5MDIzMzg1fQ==";
        //自定义图片名
        const fd = new FormData();
        fd.append("file", request.file);
        fd.append("token", token);
        fd.append("key", key);
        const config = {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        };
        axios
          .post("https://up-cn-east-2.qiniup.com", fd, config)
          .then((res) => {
            if (res.status == 200 && res.data) {
              this.submitImgList.push({
                name: request.file.name,
                uid: request.file.uid,
                md5name: request.file.md5name,
              });
              let a = {
                path: res.data.key,
                photoRemark: "",
              };
              resolve(res);
            } else {
              reject(res);
            }
          })
          .catch((err) => {
            this.$message.error({
              message: `上传失败[${err.status}]`,
              duration: 2000,
            });
          });
        resolve(true);
      });
      return promise;
    },
    // 照片计算md5
    calculateMD5(fileContent) {
      // 在这里使用你选择的MD5计算方法，例如使用crypto-js库：
      const md5 = CryptoJS.MD5(
        CryptoJS.lib.WordArray.create(fileContent)
      ).toString();
      return md5;
    },
  },
};
</script>

<style lang="scss">
</style>

为参数