el-upload图片的上传、下载、还原

最新推荐文章于 2026-06-19 13:03:15 发布

原创

最新推荐文章于 2026-06-19 13:03:15 发布 · 1k 阅读

标签

#vue.js

收录于

本文记录了使用Vue.js实现Element UI的el-upload组件进行图片上传、下载和还原的过程，包括HTML上传代码和JavaScript逻辑，提供了一个不依赖具体接口的基础实现，并提到了实际接口上传时需要注意的问题，同时推荐了一篇详细教程链接。

在写vue项目时碰到图片上传，网上有好多，但是都不是所需，所以直接官网的代码仿写，记录图片如何上传等过程
官网：https://element.faas.ele.me/#/zh-CN/component/upload
直接上代码
HTML上传代码

<el-form-item label="门店图片" prop="commodityPoster">
				<div class="commodityPoster">
					<el-upload ref="upload" action="#" list-type="picture-card" :auto-upload="false" :on-change="imgUpload">
						<i slot="default" class="el-icon-plus"></i>
						<div class="commodityPoster-img" slot="file" slot-scope="{ file }">
							<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
							<span class="el-upload-list__item-actions">
								<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
									<i class="el-icon-zoom-in">