当前位置：首页 > article >正文

【问题解决】el-upload数据上传成功后不显示成功icon

article 2025/1/26 16:39:45

el-upload数据上传成功后不显示成功icon

原因

由于后端返回数据与要求形式不符，使用el-upload默认方法调用onSuccess钩子失败，上传文件的状态并未发生改变，因此数据上传成功后并未显示成功的icon标志。

解决方法

点击按钮，调用submitDetail()方法，在该方法中通过this.$refs.uploadDetail.submit()语句，调用:http-request对应的方法，即uploadDetail(param)方法。

通过UploadServletList方法调用后端文件上传接口，根据后端返回内容进行判断，通过param.onSuccess手动调用文件上传成功的钩子，使得上传成功icon成功显示。

代码展示

<el-upload ref="uploadDetail" action="#" :on-remove="handleRemoveDetail" :on-change="handleChangeDetail" :limit="1" :file-list="detailFileList" :auto-upload="false" v-loading="detailUploadingFlag" class="upload-demo" :show-file-list="true" :http-request="uploadDetail">
	<el-button slot="trigger" size="medium" type="primary">选择</el-button>
    <el-button style="margin-left: 10px;" size="medium" type="success" @click="submitDetail">上传</el-button>
</el-upload>


<srcipt>
submitDetail() {
    this.$refs.uploadDetail.submit()
},
uploadDetail(param) {
	var formData = new FormData()
    this.detailFileList.forEach((item) => {
        formData.append('files', item.raw)
    })
    this.detailUploadingFlag = true
    UploadServletList(formData).then((res) => {
        if (!res.includes("上传出现错误")) {
            let arr = res.split(';')
            let detailShcemeSNameList = arr.map(item => item.split('>')[0])
            this.applyInfoForm.detailSchemeSName = detailShcemeSNameList[0]
            param.onSuccess(res)
            this.$message({
                type: 'success',
                message: `详细方案上传成功`
            })
        } else {
            param.onError(res)
        }
        this.detailUploadingFlag = false
    }).catch((err) => {
        console.log(err)
    })
},
</srcipt>