gpt4 book ai didi

Element-ui upload上传文件限制的解决方法

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 29 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Element-ui upload上传文件限制的解决方法由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

问题

Element-ui upload上传文件限制的解决方法

在accept中添加上传文件的类型只能起到“表面”作用,选择“所有文件”之后,还是可以上传任何类型的文件,根本起不到限制作用.

解决办法

在before-upload(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。)钩子里去做判断。这里有一个坑,当你设置了 :auto-upload="false"的时候, 这个钩子是不会被触发的,因此也可以在on-change中做判断.

上代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// :before-upload或者:on-change绑定的方法
beforeUpload(file, fileList) {
    if (file.size / (1024 * 1024) > 500) {  // 限制文件大小
      this .$message.warning(`当前限制文件大小不能大于500M`)
      return false
    }
   
    let suffix = this .getFileType(file.name) //获取文件后缀名
    let suffixArray = [ 'jpg' , 'png' , 'jpeg' , 'gif' ] //限制的文件类型,根据情况自己定义
    if (suffixArray.indexOf(suffix) === -1) {
      this .$message({
        message: '文件格式错误' ,
        type: 'error' ,
        duration: 2000
      })
    }
    return suffixArray
  },
  getFileType(name) {
    let startIndex = name.lastIndexOf( '.' )
    if (startIndex !== -1) {
      return name.slice(startIndex + 1).toLowerCase()
    } else {
      return ''
    }
  }

到此这篇关于Element-ui upload上传文件限制的解决方法的文章就介绍到这了,更多相关Element upload上传限制内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://juejin.cn/post/6920162608620404743 。

最后此篇关于Element-ui upload上传文件限制的解决方法的文章就讲到这里了,如果你想了解更多关于Element-ui upload上传文件限制的解决方法的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com