![cover](https://img-blog.csdnimg.cn/f79e85fceb944935854bfad4a76f7198.png)
el-upload上传图片,限制上传数量,超过最大数量则不展示上传组件,可点击删除
el-upload限制数量上传图片,可删除
·
1.html中布局
<el-upload
multiple
: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 }">
<!-- 上传后的图片展示 -->
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
width="300px;height:300px"
/>
<span class="el-upload-list__item-actions">
<span
class="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.实现效果
以上实现了限制数量的图片上传以及移除操作,若有不正确还望大神指点!😉
更多推荐
所有评论(0)