el-upload 同名图片替换上传浏览器缓存问题详解

因项目需求需要将学生人脸图片名称设置为  身份证号+图片后缀名

涉及到之前已经上传的图片采取删除操作  

于是就遇到了七牛云存储已经将图片删除，但是页面中图片因浏览器缓存问题没有进行刷新

解决方案如下：

在图片img组件上加上key，在图片上传完后向后端传数据时加上时间戳

<el-upload
    class="avatar-uploader uploadStuImg"
    action="https://up-cn-east-2.qiniup.com"
    :data="qiniuData"
    v-loading="stuImgLoading"
    :headers="uploadHeaders"
    :show-file-list="false"
    :on-error="onError"
    :on-success="onSuccess"
    :before-upload="beforeUpload"
    name="file">
      <img
       v-if="studentFrom.stuPhotoUrl"
       :src="studentFrom.stuPhotoUrl"
       :key="key"
       class="avatar"/>
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<script>
async beforeUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      this.qiniuData.key = this.studentFrom.stuIdNo+'.'+testmsg; // key为上传后文件名 必填
      const extension =
        testmsg === "jpg" ||
        testmsg === "JPG" ||
        testmsg === "png" ||
        testmsg === "PNG" ||
        testmsg === "bpm" ||
        testmsg === "BPM";
      const isLt50M = file.size / 1024 / 1024 < 10;
      if (!extension) {
        this.$message({
          message: "上传图片只能是jpg / png / bpm格式!",
          type: "error",
        });
        return false; //必须加上return false; 才能阻止
      }
      console.log(file);
      if (!isLt50M) {
        this.$message({
          message: "上传文件大小不能超过 10MB!",
          type: "error",
        });
        return false;
      }

      // 删除已上传的图片 await
      let key = this.qiniuData.key
      //删除图片接口
      return extension || isLt50M;
    },
    // 图片上传成功
    onSuccess(res, file) {
      this.stuImgLoading = false;
      console.log(res, "44");
       this.studentFrom.stuPhotoUrl = `域名+${res.key}?t=${new Date().getTime()}`;//向后台传网址时加入t时间戳
       this.key++; //强制让img进行渲染
    },
</script>

解决！！