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

49次阅读

共计 1310 个字符，预计需要花费 4 分钟才能阅读完成。

问题形容：

当上传的文件格式类型不为 jpeg、png、gif、jpg 时，提醒上传的文件格式不正确
当上传的文件大小超过后端返回的大小时，提醒文件体积过大

须要限度文件上传的格局和大小，最初的实现成果如下：

实现过程

对于文件大小的限度是可配置的，接口返回一个字段，我存了缓存，在上传图片的组件里，获取到存入缓存的这个值，在上传前对文件大小进行判断，上传的文件类型是写死了四种图片类型，在上传前通过判断文件类型确定是否能上传，不能的话就抛出一个正告。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-b…
提取码: yu27
百度云链接不稳固，随时可能会生效，大家放松保留哈。

如果百度云链接生效了的话，请留言通知我，我看到后会及时更新～

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

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

开源不易，Star 以表尊重，感兴趣的敌人欢送 Star，提交 PR，一起保护开源我的项目，造福更多人！

正文完