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

最新推荐文章于 2024-05-16 15:53:49 发布

一只肥鱼

最新推荐文章于 2024-05-16 15:53:49 发布

阅读量1.3w

点赞数 5

文章标签： upload

本文链接：https://blog.csdn.net/weixin_46421824/article/details/109195624

版权

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

第一次点击上传后，图片上传成功，当再次点击上传，无法更换当前照片，这时候需要使用 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>

// 检查图片上传限制
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;
},