在Vue中,如何确保el- upload上传成功后状态显示正常?

发布网友发布时间：2024-09-17 05:35

共1个回答

热心网友时间：2024-09-29 08:24

在 Vue 中，如何确保 el-upload 上传成功后状态显示正常？</在使用 Element UI 的 el-upload 组件时，我们可能会遇到上传成功后文件状态不更新的问题。关键在于如何正确地处理异步上传和响应状态的更新。

首先，让我们来看看模板部分的代码:

附件：
<el-upload
v-if="item.canEdit"
ref="upload"
:action="/upLoad"
@remove="remove"
:headers="{'content-type':'application/x-www-form-urlencoded'}"
:http-request="upLoad"
@preview="previewFile"
:file-list="item.addons"
>
<el-button
v-if="item.canEdit"
type="primary"
plain
size="mini"
@click="checkAddonsIndex(item, index)"
>
选择附件

在 JavaScript 部分，关键在于 upLoad 函数的实现。

注意，:http-request 属性需要返回一个 Promise，因为这直接影响到文件状态的更新。如果不返回，即使你手动在 file-list 中设置为成功状态，也会自动变为 ready。因此，确保在上传成功后调用 this.$message 显示成功信息，并使用 this.$set 方法更新文件的 status 属性，这样可以保证上传成功后文件状态显示正确。

通过这种方式，你可以避免文件状态停留在 ready 状态，确保上传成功后的状态更新显示在界面上。