<el-upload class="upload-demo" :action="uploadLi" :before-upload="beforeUpload" :on-success="handleSuccess" :headers="{'X-User-Token': authorization}" name="file" accept="image/png,image/jpg,image/jpeg,image/gif" :multiple=false :show-file-list=false > <div class="avatar" v-if="createForm.advertPic"> <img :src="createForm.advertPic" class="avatar_img"> <span>修改图标</span> </div> <el-button size="small" type="primary" style="height:28px;" v-else>上传</el-button> <div slot="tip" class="el-upload__tip" style="margin-top:0px;">只能上传jpg/png/gif文件 750*1642px,1M以内</div> </el-upload> //js 方法: beforeUpload (file) { //进行图片类型和大小的限制 var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) const extension = testmsg === 'png' const extension2 = testmsg === 'jpg' const extension3 = testmsg === 'jpeg' const extension4 = testmsg === 'gif' const isLt2M = file.size / 1024 / 1024 < 1 //const isLt2M = file.size / 1024 <= 500 if(!extension && !extension2 && !extension3 && !extension4) { this.$message({ message: '展会广告图只能是 png、jpg、jpeg、gif格式!', type: 'warning' }); return false;//必须加上return false; 才能阻止 } if(!isLt2M) { this.$message({ message:'展会广告图大小不能超过1M!请重新选择!', type: 'warning' }); return false;//必须加上return false; 才能阻止 } const isSize = new Promise(function(resolve, reject){ let width = 750; let height = 1642; let _URL = window.URL || window.webkitURL; let img = new Image(); img.onload = function(){ let valid = img.width == width && img.height == height; valid ? resolve() : reject(); } img.src = _URL.createObjectURL(file); }).then(()=>{ return file; }, ()=>{ this.$message({ message:'展会广告图尺寸只能是750*1642px!请重新选择!', type: 'warning' }); return Promise.reject() return false;//必须加上return false; 才能阻止 }) return extension || extension2 || extension3 || extension4 && isLt2M && isSize; },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~