el-upload显示文件
时间: 2023-10-11 13:14:10 浏览: 128
el-upload组件可以用来显示文件。可以通过设置`list-type`属性为`text`来显示文件名称。这样,当用户选择文件后,文件名称将会被显示在上传按钮旁边的文本框中。同时,你也可以通过设置`show-file-list`属性为`false`来隐藏文件列表,只显示文件名称。这样用户就只能看到选择的文件名称,而不能看到文件的详细信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
相关问题
el-upload怎么显示文件名字
要显示el-upload中选择的文件名字,可以通过以下步骤实现:
1. 首先,在el-upload组件中设置属性:show-file-list为false,这样可以禁用element自带的文件列表显示。
2. 其次,在el-upload组件中设置属性:on-change为一个方法,用来获取文件列表的数据。在该方法中,将获取到的文件列表数据存储到一个data属性中,比如fileList:[].
3. 最后,在自定义的文件列表组件中,通过v-for指令遍历文件列表数据,将每个文件的名称显示出来。可以使用{{ file.name }}来获取文件的名字,并将其显示在相应的位置上。
这样,当用户选择文件后,el-upload组件会触发on-change方法,将文件列表数据存储到fileList中,在自定义的文件列表组件中通过遍历fileList来显示每个文件的名字。这样就可以实现el-upload显示文件名字的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [el-upload自定义文件列表](https://blog.csdn.net/weixin_60945744/article/details/127212452)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
el-upload 显示上传文件进度
el-upload组件可以通过自定义上传的实现来显示上传文件的进度。你可以使用axios库来发送上传请求,并在请求中监听上传进度。以下是一个示例代码:
```vue
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-progress="handleUploadProgress"
:http-request="customUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
import axios from 'axios';
export default {
methods: {
handleUploadProgress(event, file, fileList) {
// 处理上传进度
console.log('上传进度:', event.percent);
},
customUpload(file) {
// 自定义上传实现
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append('file', file);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
// 监听上传进度
this.handleUploadProgress(progressEvent, file);
}
}).then(response => {
// 上传成功
resolve(response.data);
}).catch(error => {
// 上传失败
reject(error);
});
});
}
}
}
</script>
```
在上述代码中,我们使用了el-upload组件,并通过设置`on-progress`属性来监听上传进度。在`customUpload`方法中,我们使用axios库发送上传请求,并在请求中设置`onUploadProgress`回调函数来监听上传进度。通过调用`handleUploadProgress`方法来处理上传进度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)