element-ui图片上传组件之限制每次5张上传（或者自定义每次几张上传）

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() //清除列表

element-ui图片上传组件之限制每次5张上传（或者自定义每次几张上传）相关推荐

Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
element ui图片上传-实现单图上传
1. 业务需求: 需要把多图上传的效果改造成为单图上传的效果 2. 效果展示 (1) 原来官网效果: https://element.eleme.cn/2.0/#/zh-CN/component/up ...
Element UI 图片上传功能踩坑
样式效果: <el-uploadmultipledragclass="upload-demo":headers="token"action=" ...
element ui 图片控件排序_Element-ui上传图片后隐藏上存控件
在使用Element-ui el-upload组件的时候,发现我只想上存一张图片,比如头像的上存,然而上存一张后,控件还可以继续上存. 一下的方法是Element-ui上传图片后隐藏上存控件. 在el ...
Element ui Avatar头像管理组件实现当用户没有头像时以名称最后一个字为头像
el-avatar是一个比较方便的头像管理组件 src控制他的图片展示 <el-avatarclass = "avatar":src="item.images&qu ...
从Element ui看开发公共组件的三种方式
在日常的开发工作中,封装自己的公共组件是很常见的需求,但想要组件更加优雅和通用也是一门学问.恰好前段时间用过Element ui,于是想学习这种库是如何封装插件的,这篇文章就是我的一点理解. 从入口文 ...
axure element ui素材_【Axure分享】基于Element UI的Axure Web组件
有一段时间没做过产品原型了,前一阵有一个web产品需要做原型,正好在搞前端,于是顺便把Element UI移植到Axure上,基本上实现了大部分的功能组件,部分过于繁琐的组件未实现. 自己觉得蛮满意的 ...
element ui 图片加载失败_2.ElementUI之图片懒加载无法显示的问题，求教。
在使用这个组件的时候,遇到了奇奇怪怪的Bug. 页面出来了,但图片的懒加载功能却没出来,没有实现官网给出的效果. 代码如下这是gourmet world页面 11111 export default ...
element ui 图片上传_游民晚播报：PS5手柄续航情况测试 UI界面概览放出
各位朋友晚上好,现在为您带来今天的晚间播报.一起来回顾一下今天白天游戏圈内外都有哪些要闻.趣闻. 要闻回顾: 1.PS5 DualSense手柄续航情况触觉反馈密集游戏更耗电新闻原文:点击查看 P ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...

element-ui图片上传组件之限制每次5张上传（或者自定义每次几张上传）

element-ui图片上传组件——限制每次5张上传

element-ui图片上传组件之限制每次5张上传（或者自定义每次几张上传）相关推荐

最新文章

热门文章