Vue 上传组件el-upload 预览

回答: 在Vue中使用el-upload组件进行图片上传并预览的方法如下：

首先，在父级组件中引入uploadImg组件，并在el-form-item中使用upload-img组件进行图片上传。\[1\]

然后，在el-upload组件中将auto-upload设置为false，这样不会执行自动上传。同时，给on-change事件绑定一个方法imgSaveToUrl，在该方法中生成可用于本地预览的URL。\[2\]

在imgSaveToUrl方法中，可以通过event.raw获取上传的图片实体，然后根据不同的浏览器生成对应的本地URL。\[3\]

最后，将生成的本地URL赋值给一个变量，用于在页面上展示预览图片。同时，根据需要，可以控制显示和隐藏上传组件和本地预览组件的状态。

这样，就可以实现在Vue中使用el-upload组件进行图片上传并预览的功能了。
#### 引用[.reference_title]
- *1* [vue3+el-upload上传图片封装组件](https://blog.csdn.net/qq_39536826/article/details/130051704)[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^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [Vue中通过el-upload组件实现上传前预览本地图片](https://blog.csdn.net/zrcj0706/article/details/103136634)[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^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]