el-upload非自定义上传失败时仍在列表展示的问题及处理方案

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天，点击查看活动详情

题引：

平常上传文件时，我们不少使用element-ui的el-upload吧，但是前两天使用的时候发现它存在了一个bug。当我们上传文件且失败时，它的上传信息依旧存在上传列表里，但实际上变量是没有该上传记录的，这就很迷惑性了。经过多次查阅文档和打印ref信息，后面通过一个数组的方法干掉了这个bug。

正文：

先上一下demo代码

<el-upload ref="pictureRef" 
    :action="uploadPictureUrl" 
    :headers="headers" 
    multiple 
    :limit="9"
    :on-exceed="handleExceed" 
    :on-preview="handlePreview" 
    :on-remove="handlePictureRemove"
    :before-upload="beforePictureUpload" 
    :on-success="onPictureSuccess" 
    list-type="picture"
    :file-list="pictureList">
        <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

当我们上传成功时，不管接口的回调是成功还是失败，它都会触发on-success回调方法，且第一个参数是一个response，该参数就跟我们接口的返回格式一样，包含code、data等，那么我们就可以进行逻辑处理

// 文件上传成功
onPictureSuccess(res) {
    if (res.code == 200) {
        this.pictureList.push({ name: res.data.originalFilename, url: res.data.filePath })
    } else {
        this.$message.error(res.message)
        ...
    }
},

那么失败的回调该怎么处理呢，通过查看该组件之后，发现它的上传列表是由uploadFiles数组来展示的，那么我们只需要把失败的response从数组移除（通过indexOf+splice即可），即可达到我们的效果

// 文件上传成功
onPictureSuccess(res) {
    if (res.code == 200) {
        this.pictureList.push({ name: res.data.originalFilename, url: res.data.filePath })
    } else {
        this.$message.error(res.message)
        this.$refs.pictureRef.uploadFiles.splice(this.$refs.pictureRef.uploadFiles.indexOf(res), 1)
    } 
},

通过上面新增的那行代码，当我们上传的文件接口失败时，该组件的展示列表将不会存在失败的记录，而只会存在成功的记录。

结尾：

希望该文章能对你有所帮助。