element-ui 图片上传:limit=‘1‘只允许上传一张的情况，第二次上传失败

心已赠人 2021-09-02 04:27 2019阅读 0赞

前面写FBA 有限制单张上传图片的情况  
上传成功以后 但不符合格式需求 所以返回上传格式不正确 需要二次上传 这个时候 再次点击上传则上传失败 是因为我第一次上传以及成功了 虽然不符合要求

所以药在上传成功的函数里面做判断 如果不符合要求 则清空之前上传的文件列表即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70_pic_center]

<el-upload class="upload-demo" :action="$baseURL + '/index.php/fba/uploadExceltotal'"
             :limit="1" :on-exceed="handleExceed" :on-change="handleChange"
             :before-upload="beforeUploadFile" :file-list="fileList" :on-remove="handleRemove"
             :on-success="handleAvatarSuccess" :on-error="handleAvatarError"
             :show-file-list="false" v-if="ModelStatus == 0" :on-progress="onprogress">
            <el-button type="primary" style="font-size:16px;" size="small" slot="trigger">创建发仓总表
            </el-button>
    </el-upload>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70_pic_center 1]

handleAvatarSuccess(res, file) { 
                            //总表和分表上传成功会被调用
                            this.loading = false;
                            console.log("成功调用", res, file);
                            if (res.code == 200) { 
                                  this.dialogVisible = false;
                                  this.$message({ 
                                        message: res.message,
                                        type: "success",
                                  });
                                  if (this.ModelStatus == 0) { 
                                        this.imageUrl.push(res.data);
                                        console.log(this.imageUrl);
                                  } else { 
                                        let arr = this.imageUrlSecond;
                                        arr.push(res.data);
                                        this.imageUrlSecond = arr;
                                        console.log(this.imageUrlSecond);
                                  }
                            } else { 
                                  this.$message({ 
                                        message: res.message,
                                        type: "warning",
                                  });
                                  // 上传的格式不正确时  重新上传前要把列表清空 否则无法上传
                                  console.log(res.file_column);
                                  if (res.file_column == "total") { 
                                        console.log(11111111,this.fileList);
                                        this.fileList = [];
                                        //或者 使用组件自带的方法
                                        // this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
                                  } else { 
                                        //分仓表
                                  }
                            }
                      },

特此记录

另外网上有一种使用方法也可以，使用组件自带的清空上传列表方法

this.$refs.upload.clearFiles(); //上传成功之后清除历史记录

都可以实现

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/0ef40642fe2f4be9ab8b06d58afa371d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/84128a040cb24f6a9f3a798be9bf671e.png