Elementui组件上传缩略图,即使上传不成功,也生成了缩略图

Elementui组件上传缩略图,即使上传不成功,也生成了缩略图

1.问题:最近使用的 upload 组件,有一个缩略图功能,但是使用 :http-request 方法进行文件提交,提交文件之前需要对文件类型,以及文件大小进行校验。具体代码如下

 <el-upload ref="pictureUpload" :on-remove="(file,fileList)=>handleRemove(file,fileList,scope.row)" :on-change="(file,fileList)=>handleChange(file,fileList,scope.row)"
                     action="#" :http-request="param => uploadMethod(param,scope.row)" multiple  list-type="picture-card" class="my_upload">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
          // 上传文件的方法
      uploadMethod(param,row){
      
          const nameSplitArr = param.file.name.split(".") ;
          let isType = row.extension.indexOf(nameSplitArr[1]) != -1 ;
          if(!isType){
            this.$message.error('上传文件后缀只能是 '+row.extension+' 格式!');
            return Promise.reject();
          }

          const isLt2M = param.file.size / 1024 / 1024 < row.fileMaxSize;
          if (!isLt2M) {
            this.$message.error('上传文件大小不能超过 '+row.fileMaxSize+'MB!');
            return Promise.reject();
          }

         }

主要实现,当校验不成功的时候,不要直接 return 一个空值,否则的话虽然文件没有上传成功,但是缩略图已经存在了。应该使用 return Promise.reject();

你可能感兴趣的:(Java菜鸡改bug之路,elementui,vue.js,前端)