iview 如何实现文件上传并限制上传格式和大小

395 篇文章 34 订阅

问题描述:

  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;

  },

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址
码云地址:
http://github.crmeb.net/u/defu

Github 地址:
http://github.crmeb.net/u/defu

开源不易,Star 以表尊重,感兴趣的朋友欢迎 Star,提交 PR,一起维护开源项目,造福更多人!

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值