el-upload上传文件保存到el-table
时间: 2023-09-08 13:10:19 浏览: 125
vue3 el-table多级表头收缩扩展的实现(JS原味版)
要将 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 中。您可能需要根据自己的需求进行修改。
阅读全文