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