el-upload上传组件，上传失败缩略图依旧存在问题

最新推荐文章于 2024-07-16 16:08:01 发布

曾小白不想写SQL

最新推荐文章于 2024-07-16 16:08:01 发布

阅读量646

点赞数 6

分类专栏：前端学习文章标签：前端

本文链接：https://blog.csdn.net/qq_41935885/article/details/135734659

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题：

我的图片上传限制了大小，上传时超过5M会报错提示不能超过该大小，但是缩略图依旧生成了

解决：

调用上传函数时，失败则返回Promise.reject()。具体代码如下：

<el-upload
  action="#"
  accept="image/jpeg,image/png"
  :file-list="appealFileList"
  multiple
  :http-request="handleUpload"
  list-type="picture-card"
  :on-change="handleChange"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <el-icon><Plus /></el-icon>
</el-upload>
<el-dialog :title="'预览申诉照片'" v-model="dialogVisible" >
  <el-image :src="dialogImageUrl" preview-teleported></el-image>
</el-dialog>


const handleUpload = (option) => {
  const isType = option.file.type === 'image/jpeg' || 'image/png'
  const isLt20M = option.file.size / 1024 / 1024 < 20
  let flag=true;
  if (!isType) {
    ElMessage.error('上传图片只能是 JPG、PNG 格式!');
    flag=false;
  }
  if (!isLt20M) {
    ElMessage.error('上传图片大小不能超过 20MB!');
    flag=false;
  }
  if(!flag){
   //关键在这里，要reject         
    return Promise.reject()
  }else{
    appealFileList.push(option.file);
  }
};

扩展：

我这个功能是多图片上传，前端上传到OSS，另外还有一个保存按钮，最开始是用户上传一次就立马上传到OSS，但是生产中经常发生丢图片的事件，最后反应过来是异步的问题，一次上传多张图片，图片还在上传OSS，用户点击保存，导致最后的上传的照片集合中只有部分图片。
解决方案：在用户点击保存的时候对所有图片进行上传，等待所有图片上传完毕后再请求后端接口