怎么获取到el-upload上传成功的文件
时间: 2023-08-30 22:06:40 浏览: 115
你可以通过监听 `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-upload中如何触发选文件(其他按钮触发el-upload上传)
可以使用el-upload组件提供的ref属性获取到el-upload的组件实例,在其他按钮的点击事件中通过调用实例的click()方法来触发选文件操作。例如:
```
<el-upload ref="uploadRef"></el-upload>
<el-button @click="selectFile">选择文件</el-button>
methods: {
selectFile() {
this.$refs.uploadRef.click()
}
}
```
这样点击"选择文件"按钮时,就会触发el-upload的选文件操作。
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 中。您可能需要根据自己的需求进行修改。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)