关于el-upload上传图片的一些坑clearFiles()的使用

点击上传图片后 再次点击上传图片 无法更换当前图片

第一次点击上传后，图片上传成功，当再次点击上传，无法更换当前照片，这时候需要使用 clearFiles 清空已上传文件列表 这时候在次点击，就会正常显示更换后照片啦

展示代码

<el-upload
   ref="upload"
   :action="uploadUrl"
   :before-upload="beforeAvatarUpload"
   :on-success="handleUploadSuccess"
   :on-error="handleError"
   :show-file-list="false"
   :multiple="false"
   :limit="1"
   accept=".jpg, .png"
   name="files">
   <div slot="tip" class="el-upload__tip">{{ $t('vendor.uploadTip') }}</div>
   <el-button size="small">上传</el-button>
 </el-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 检查图片上传限制
beforeAvatarUpload(file) {
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (this.isJpgOrPng(file.name) && isLt5M) {
    return true;
  } else {
    this.$message.error('上传图片最大为5M  图片格式为jpg,png');
    return false;
  }
},
// 判断文件名后缀为JPG或PNG
    isJpgOrPng(fileName) {
      const index = fileName.lastIndexOf('.');
      if (index !== -1) {
        const suffix = fileName.substring(index + 1).toLowerCase();
        if (suffix === 'jpg' || suffix === 'png') {
          return true;
        } else {
          return false
        }
      } else {
        return false
      }
    },
// 上传图片成功
handleUploadSuccess(response, file, fileList) {
	this.$refs.upload.clearFiles();
	this.img = process.env.BASE_API + 'info/files/image/' + response.data.fileId + '?access_token=' + this.$store.getters.token;
	this.form.logo = response.data.fileId;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30