最近跟element结下不解之缘，很多地方用到组件。

这篇文章主要记录使用Element Upload 上传图片组件的过程。

Upload 上传图片组件：https://element.eleme.cn/#/zh-CN/component/upload

需求：弹窗内上传图片

 代码：

引入element步骤省略，有需要可以到element官网查询

element安装：https://element.eleme.cn/#/zh-CN/component/installation

1、页面布局：

说明：Element Upload 上传图片组件包含多种形式，这里使用照片墙。

<!-- 点击按钮触发弹窗 --><el-button type="warning" icon="el-icon-plus" size="small" class="addCategory" @click="addActivity(),addShow=true">添加活动</el-button><!-- 弹窗 --><el-dialog title="添加运营活动" :visible.sync="addShow"><el-form><el-form-item label="活动图片" :label-width="formLabelWidth" prop="addImg"><el-upload:class="{hide:hideUpload,show:showUpload}":action="baseUrl" ref="upload" list-type="picture-card":auto-upload="false" :on-change="onChange" :on-remove="handleRemove" :http-request="fileLists" :limit="1"><i slot="default" class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="addShow = false">取 消</el-button> <el-button type="primary" @click="addUpLoads(),addShow = false" >确 定</el-button></div></el-dialog>

 弹窗内容只展示了关于上传图片的部分，其余不赘述。

另外，Upload组件照片墙默认可上传多张照片，需求规定只能上传一张，可以设置:limit="1"，但遇到另一个问题，上传一张照片后，上传部分依然存在，类似：

明显这是不合理的，所以我们进行处理，组件动态绑定class，而决定class是否生效的值，在on-change 和 on-remove 绑定的方法中进行判断。

 样式如下：

<style>/deep/.hide .el-upload--picture-card {display: none;}/deep/.show .el-upload--picture-card {display: block;}</style>

注意：/deep/  为深度选择器，在修改组件样式时很常用

附上所用组件的相关属性和方法：

 更多详细属性及方法可查看：https://element.eleme.cn/#/zh-CN/component/upload

2、js

<script>export default {data(){return{addShow:false,// 弹窗出现/隐藏formLabelWidth:'120px',// 弹窗内每行表单标题宽度baseUrl:'http://...',// 上传的接口地址，baseUrl是必传属性，这里不是自动上传，所以随便给出一个上传地址即可dialogVisible: false,dialogImageUrl: '',fileImgUrl:'',// 图片地址hideUpload: false,showUpload: false,}},methods:{// 文件状态改变时，添加文件、上传成功和上传失败时都会被调用onChange(file, fileList){// 以上提到照片墙可传入多个图片，但这里只需要传入一个，所以做处理// 且当已传入照片时，隐藏上传组件this.hideUpload = fileList.length >= this.limitCount;this.fileImgUrl = fileList[0].url;},// 文件列表移除文件时的钩子handleRemove(file, fileList){// 当删除照片时，显示上传组件this.showUpload = fileList.length < this.limitCount;this.fileImgUrl = '';},// http-request覆盖默认的上传行为，可以自定义上传的实现（调用接口上传图片）fileLists(val){let userToken = localStorage.getItem("userToken"); //接口要求传入token，看具体接口需求// 以下部分为接口所需其他传参，按需传入即可let fd = new FormData(); let file = val.file;fd.append("picture",file);fd.append("activityStartTime",this.startTime);fd.append("activityEndTime",this.endTime);fd.append("activityName",this.addForm.addName);fd.append("activityTag",this.value);fd.append("activityType",this.radioValue);fd.append("singleProduct",this.goodsNum);// 请求头let headers = {"Content-Type": "multipart/form-data",// 请求头内Content-Type一定要是form-data格式'Authorization':userToken}this.$http.post(url.saveActivity,fd,{headers}).then((res) => {if (res.data.code === 0) {this.$message({message: res.data.msg,type:"success",});}else{this.$message({message: res.data.msg,type: "error",});}this.getActivityList();//新增成功调取列表接口刷新页面});},}}</script>

 备注：我最开始失败是败在了接口其他传参部分，所以大家用也要留意这部分的传入方式。

如果接口只需传入文件，无需其他传参，那就可以省略掉以下部分

以上就是Element Upload 上传图片组件使用的过程详解，希望能帮助到你。

欢迎大家提出问题！