关于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>
// 检查图片上传限制
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;
},
  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以通过监听 `on-success` 事件,在事件回调函数中获取上传成功的文件列表,然后将这些文件列表保存到组件的 `file-list` 属性中,最后将 `show-file-list` 属性设置为 `true`,这样组件就会隐藏上传区域,只显示已上传的文件列表。 具体实现代码如下: ```html <template> <div> <el-upload ref="upload" class="upload-demo" :action="uploadUrl" :on-success="handleSuccess" :file-list="fileList" :show-file-list="showFileList" :auto-upload="false" :list-type="'picture'" multiple> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> <el-button size="small" type="warning" @click="clearFiles">清空文件</el-button> </el-upload> <el-divider></el-divider> <div v-if="showFileList"> <el-image v-for="(file, index) in fileList" :key="index" :src="file.url" style="margin-right: 20px" :fit="fit" :preview-src-list="previewSrcList"></el-image> </div> </div> </template> <script> export default { data() { return { uploadUrl: '/upload', fileList: [], showFileList: false, previewSrcList: [], fit: 'cover' } }, methods: { handleSuccess(response, file, fileList) { fileList.forEach(item => { this.previewSrcList.push(item.url) }) this.fileList = fileList this.showFileList = true }, submitUpload() { this.$refs.upload.submit() }, clearFiles() { this.fileList = [] this.showFileList = false this.previewSrcList = [] } } } </script> ``` 在上面的代码中,我们监听了 `on-success` 事件,并在事件回调函数中获取上传成功的文件列表,然后将这些文件列表保存到 `fileList` 属性中,最后将 `showFileList` 属性设置为 `true`,这样组件就会隐藏上传区域,只显示已上传的文件列表。 同时,我们在显示已上传的文件列表时,通过 `v-for` 指令遍历 `fileList` 数组,使用 `el-image` 组件来显示每个文件的预览图,并通过 `preview-src-list` 属性设置预览图的列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值