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

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 = trueUploadServletList(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>

效果展示