element-ui图片上传组件——限制每次5张上传
1、limit上传个数限制配合on-exceed属性使用；
2、上传之前提示图片大小限制属性before-upload；
3、上传成功后对图片的filelist处理；
4、使用oss上传，没使用elementui的上传方式；
直接上代码
<template><div class="ele-upload-styl"><el-uploadaction="":headers="uploadProps.headers":show-file-list="false":http-request="fnUploadRequest":on-success="handleSuccess":before-upload="handleUpload"accept=".png,.jpg,.jpeg,.gif,.webp"multiple:limit="5":on-exceed="handleExceed"ref="upload"><div class="img-cont pr"><img slot="trigger" class="img-icon" src="@/assets/img/icon-img-upload.png" alt=""><span slot="tip" class="img-text">图片</span></div></el-upload></div></template><script>import {getAccessToken,getRefreshToken,getAccessTokenTTL,} from "@/utils/auth";import {uploadOSS } from '@/utils/ossImage';export default {name: "imgUpload",components: {},props: {},computed: {userAccountID() {return this.$store.state.user.userAccountID;},uploadProps() {return {// action: `${process.env.VUE_APP_BASE_API}/api/image/upload`,headers: {// 接口可能要带token: "",Authorization: getAccessToken(),},data: {},};},},data() {return {};},methods: {// handleExceed(file, fileList) {// // console.log(file, fileList);// this.$message.error("上传失败，限制上传数量10张图片以内！");// },// beforeUpload_u(file, fileList) {// // console.log(file, fileList);// var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);// const extension =//testmsg === "png" ||//testmsg === "jpg" ||//testmsg === "jpeg" ||//testmsg === "gif" ||//testmsg === "webp";// const isLimit10M = file.size / 1024 / 1024 < 10;// var bool = false;// if (extension && isLimit10M) {//bool = true;// } else {//bool = false;// }// if (!extension) {//this.$message.error("请上传图片格式文件！");//return bool;// }// if (!isLimit10M) {//this.$message.error("上传失败，不能超过10M！");//return bool;// }// return bool;// },// handleSuccess(res) {// // console.log(res);// if (res.code == 0) {//this.$emit("imgData", res.item);//this.$message.success("上传图片成功！");// } else {//this.$message.error("上传图片失败！");// }// },// handleError(err) {// this.$message.error("上传图片失败！");// },// 上传图片判断handleUpload(file) {// console.log(file);var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);const extension =testmsg.toLowerCase() === "png" ||testmsg.toLowerCase() === "jpg" ||testmsg.toLowerCase() === "jpeg" ||testmsg.toLowerCase() === "gif" ||testmsg.toLowerCase() === "webp";const isLimit10M = file.size / 1024 / 1024 < 10;var bool = false;if (extension && isLimit10M) {bool = true;} else {bool = false;}if (!extension) {this.$message.error("请上传图片格式文件！");return bool;}if (!isLimit10M) {this.$message.error("文件太大，单个文件不能超过10M! ");return bool;}return bool;},handleExceed(files, fileList) {// console.log(files, fileList);this.$message.warning(` 一次最多上传5张，请分批次上传! `)},// 上传图片async fnUploadRequest(options) {// console.log(options);try {this.$loading.show()// console.log(options);let file = options.file; // 拿到 filelet res = await uploadOSS(file)// console.log(res);// 返回的就是图片地址this.$emit("imgData", res);this.$loading.hide()} catch (e) {this.$loading.hide()this.$message.error("上传图片失败！请重新上传");}},//图片上传成功回调handleSuccess(res) {// console.log(res);this.$refs.upload.clearFiles() //清除图片列表},},};</script><style lang="scss" scoped>::v-deep .el-upload,::v-deep .el-upload--picture-card {// width: 50px;height: 24px;border: none;line-height: 0;display: block;background: #f5f6fb;}::v-deep .el-upload {width: 50px;}.img-cont {width: 50px;height: 24px;background: #f5f6fb;.img-icon {color: #ccc;}.img-text {font-size: 12px;height: 24px;color: #000;margin-left: 3px;}}</style>
其中的一些参数打印
重点是这句代码：每次成功后都清空数据列表
this.$refs.upload.clearFiles() //清除列表
