怎么获取到el-upload上传成功的文件
时间: 2023-08-30 12:06:40 浏览: 63
你可以通过监听 `success` 事件来获取上传成功的文件信息。在 `success` 事件回调函数中,可以通过参数 `response` 来获取上传成功后服务器返回的数据,包括文件的 URL 等信息。
示例代码如下:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
>
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button slot="tip" type="warning" icon="el-icon-upload2">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
console.log('上传成功', response)
// 在这里处理上传成功后的文件信息
},
},
}
</script>
```
在 `handleSuccess` 方法中,可以使用 `response` 参数获取到上传成功后服务器返回的数据。根据返回的数据格式,在这里处理上传成功后的文件信息。
相关问题
el-upload上传文件保存到el-table
要将 el-upload 上传的文件保存到 el-table 中,您需要编写一些代码来处理上传事件。以下是一个简单的示例:
首先,您需要在 el-upload 组件上添加一个 `:on-success` 属性,以便在上传成功后调用一个方法:
```html
<el-upload
class="upload-demo"
action="/your/upload/url"
:on-success="handleUploadSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
然后,您需要在 Vue 实例中编写 `handleUploadSuccess` 方法来处理上传成功事件。在该方法中,您可以将上传的文件数据添加到 el-table 中。
```js
export default {
data() {
return {
tableData: []
};
},
methods: {
handleUploadSuccess(response, file) {
// 将上传成功后的返回数据添加到 el-table 中
this.tableData.push({
name: file.name,
size: file.size,
url: response.url
});
}
}
};
```
请注意,此示例仅演示了如何将上传的文件数据添加到 el-table 中。您可能需要根据自己的需求进行修改。
el-upload上传多文件
要实现el-upload上传多文件,你需要设置`multiple`属性为`true`。这样用户就可以选择并上传多个文件了。以下是使用el-upload上传多的示例代码:
```
<template>
<el-upload
action="/upload"
:multiple="true"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
// 上传成功的处理逻辑
},
handleError(error, file, fileList) {
// 上传失败的处理逻辑
}
}
}
</script>
```
在上面的代码中,通过设置`:multiple="true"`来启用多文件上传的功能。你可以根据需要在`handleSuccess`和`handleError`方法中处理上传成功和失败的逻辑。当用户选择文件并点击上传按钮后,选择的多个文件将会被同时上传到指定的`action`地址。