1.html中布局
<el-uploadmultiple:limit="6"accept="image/png"action="#"list-type="picture-card":http-request="uploadDetailImg":on-remove="handleRemove":file-list="fileList":on-change="handleEditChange":class="{ hide: hideUploadBtn }"><!-- limit：最大上传数量 --><!-- accept：限制上传格式，不满足格式的文件被置灰 --><!-- action：上传地址 接口写在js中要用# 必选参数 --><!-- list-type：文件上传的类型 此处为 照片墙 --><!-- http-request：自定义上传 --><!-- on-remove：移除图片 --><!-- file-list：上传的文件列表 --><!-- on-change：文件状态改变时的钩子 --><!-- :class="{ hide: hideUploadBtn }": 控制上传组件是否显示 data中默认 hideUploadBtn: false --><div slot="fileList" slot-scope="{ file }"><!-- 上传后的图片展示 --><imgclass="el-upload-list__item-thumbnail":src="file.url"alt=""width="300px;height:300px"/><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-delete"@click="handleRemove"><!-- 删除图标 --><i class="el-icon-delete"></i></span></span></div><i class="el-icon-plus"></i></el-upload>
2.js中相应方法
// 自定义方法 上传图片 限制6张uploadDetailImg(file) {//file为点击上传时返回的文件内容let formData = new FormData();// 定义传递参数第一个值为参数名 第二个为值formData.append("appMiniFile", file.file);formData.append("type", "02");formData.append("token", this.token);// 调用上传图片的接口uploadPicture(formData).then((res) => {// 成功时拿到res中的url 赋值res.value = res.url;// 图片必传校验this.$set(this.form, "detailImg", res.url);// 上传后去掉必传提示this.$refs["form"].validateField("detailImg");// 将接口返回的数据res push到展示图片的fileList中this.fileList.push(res);});},// 移除图片操作handleRemove(file, fileList) {// fileList为移除后剩余的图片数组 赋值给this.fileList 则展示正确this.fileList = fileList;// 上传图片 > 6 则隐藏上传组件this.hideUploadBtn = fileList.length >= 6;},// 最多上传6张图，超过时隐藏上传按钮handleEditChange(file, fileList) {this.hideUploadBtn = fileList.length >= 6;},
3.css中控制是否显示上传控件
// 隐藏上传组件.hide {.el-upload--picture-card {display: none !important;}}
4.实现效果
以上实现了限制数量的图片上传以及移除操作，若有不正确还望大神指点！😉
