el-upload图片上传和回显
时间: 2023-09-02 07:06:52 浏览: 190
el-upload组件是一种用于上传文件的Element UI组件。您可以使用el-upload来实现图片的上传和回显功能。首先,使用el-upload组件的accept属性来限制上传文件的类型,这样只允许上传图片文件。其次,您可以通过设置action属性来指定文件上传的地址,这个地址可以先设置为"#",因为您需要和表单一起添加到服务器,所以点击上传时只是
#### 引用[.reference_title]
- *1* *2* *3* [【vue 项目】el-upload 上传文件以及回显照片和下载文件](https://blog.csdn.net/Aohanzzz/article/details/129378829)[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_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关问题
el-upload多张图片回显
要实现el-upload多张图片回显,你可以通过以下步骤来完成:
1. 在el-upload组件中设置multiple属性,允许用户选择多张图片。
2. 通过el-upload组件的change事件监听用户选择的图片,并将图片存储到一个数组中。
3. 在el-upload组件的成功回调函数中,将上传成功的图片地址存储到一个数组中。
4. 在页面中使用v-for指令遍历存储图片地址的数组,将每张图片以img标签的形式展示出来。
以下是一个示例代码:
```
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:multiple="true"
:on-change="handleChange"
:on-success="handleSuccess">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<div v-for="(item, index) in imageUrlList" :key="index">
<img :src="item" style="max-width: 200px; max-height: 200px;">
</div>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
imageUrlList: []
};
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList;
},
handleSuccess(response, file, fileList) {
this.imageUrlList.push(response.url);
}
}
};
</script>
```
在上述代码中,el-upload组件的multiple属性被设置为true,change事件被绑定到handleChange方法上,成功回调函数被绑定到handleSuccess方法上。图片地址被存储在imageUrlList数组中,最终通过v-for指令遍历展示出来。
el-upload缩略图图片回显
回答: 当使用el-upload组件上传图片时,可以通过设置file-list属性来实现缩略图的回显。在编辑时,如果图片回显失败,一种解决方法是确保上传文件列表对象数组中的key使用name和url这两个属性,否则无法正确回显图片。另外,在上传图片时,如果图片格式不正确,依旧会显示该图片,但实际上该图片并未上传。解决这个问题的方法是,在挂载之前终止图片的上传,可以在beforeAvatarUpload方法中判断图片的类型,并在不支持的文件类型上返回false,从而终止上传。另一种情况是,在el-upload组件中,通过将后端返回的图片地址赋值给fileList来实现缩略图的回显。在el-upload的file slot中,可以通过设置img标签的src属性为file.url来显示图片的缩略图。<em>1</em><em>2</em>
#### 引用[.reference_title]
- *1* [问题记录:el-upload已上传图片未回显问题](https://blog.csdn.net/weixin_43814183/article/details/126224676)[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^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* [el-upload编辑时回显图片](https://blog.csdn.net/Zzz_MxY/article/details/122437423)[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^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)