iview实现文件上传 限制上传格式、大小 |
您所在的位置：网站首页 › 上传jpg格式显示不正确 › iview实现文件上传 限制上传格式、大小 |
iview实现文件上传 限制上传格式、大小
|
问题描述：下面以CRMEB Pro版产品为例 1.当上传的文件格式类型不为jpeg、png、gif、jpg时，提示上传的文件格式不正确 2.当上传的文件大小超过后端返回的大小时，提示文件体积过大 需要限制文件上传的格式和大小，最后的实现效果如下： 对于文件大小的限制是可配置的，接口返回一个字段，我存了缓存，在上传图片的组件里，获取到存入缓存的这个值，在上传前对文件大小进行判断，上传的文件类型是写死了四种图片类型，在上传前通过判断文件类型确定是否能上传，不能的话就抛出一个警告。 beforeUpload函数的返回值如下： { uid: 1651890175890 lastModified: 1651832588481 lastModifiedDate: Fri May 06 2022 18:23:08 GMT+0800 (中国标准时间) name: "微信图片_20220506182305.jpg" size: 846192 type: "image/jpeg" webkitRelativePath: '' }示例代码如下： // 上传之前 beforeUpload(res) { //控制文件上传格式 let imgTypeArr = ["image/png", "image/jpg", "image/jpeg","image/gif"]; let imgType = imgTypeArr.indexOf(res.type) !== -1 if (!imgType) { this.$Message.warning({ content: '文件 ' + res.name + ' 格式不正确, 请选择格式正确的图片', duration: 5 }); return false } // 控制文件上传大小 console.log(res.size,'文件大小'); let imgSize = localStorage.getItem('file_size_max'); //获取缓存的文件大小限制字段 let Maxsize = res.size < imgSize; let fileMax = imgSize/ 1024 / 1024; if (!Maxsize) { this.$Message.warning({ content: '文件体积过大,图片大小不能超过' + fileMax + 'M', duration: 5 }); return false } this.uploadData = { pid: this.treeId, }; let promise = new Promise((resolve) => { this.$nextTick(function () { resolve(true); }); }); return promise; },以上就是CRMEB讲解的iview实现文件上传 限制上传格式、大小的所有内容，有不懂的可以在下方留言讨论 |
【本文地址】
今日新闻 |
推荐新闻 |