对于el-upload标签的accept属性理解

近日测试提出一个bug,在上传文件时,如果选择internet快捷方式上传,此文件会直接显示下载。

正常上传文件都是不会打开文件和对文件进行操作的,测试说这个bug在其他系统中也遇到过暂未解决。就这句话,我就开始好奇了!

我去百度了怎么生成Internet快捷方式。

新建txt文件,复制下面内容,然后将 .txt 后缀改为 .url 就得到了一个Internet快捷方式

[DEFAULT]
BASEURL=http://hi.baidu.com/qishichang
[InternetShortcut]
URL=https://www.baidu.com
Modified=D050F56C08ACC601FC
IconFile=C:\WINDOWS\system32\SHELL32.dll
IconIndex=13
[InternetShortcut.A]
[InternetShortcut.W]
IconFile=E:+AFyPb072fxaPkQBc-favicon.ico

上面的解说是对有兴趣的同学可以去自己试试。
##------------------------分割线--------------------------------------------

下面说说accept属性

官方解释:接受上传的文件类型

之前我理解的就是我们上传文件之后会校验文件类型是否符合accpet的值,代码告诉我,理解错了!!!
accpet:现在我理解的是 其实在上传文件时,只是一个快捷选择的文件类型而已,当我们设置accpet=".xlsx,.xls" 只是改变了此处快捷选择文件的类型,没有其他作用,在页面中我们还需要自行校验最后上传的文件类型是否为accpet的类型在这里插入图片描述
需要校验就用到下面这个钩子@before-upload="beforeUpload"

// 完成beforeUpload钩子,校验文件后缀有多种,此处仅展示一种,下面是文件大小
beforeUpload(file) {
  const FILE_NAME = file.name
  if (FILE_NAME.substring(FILE_NAME.lastIndexOf('.')) !== '.xls' && FILE_NAME.substring(FILE_NAME.lastIndexOf('.')) !== '.xlsx') {
    this.$message.warning('仅支持.xls和.xlsx文件')
    return false
  }
  const isLt1M = file.size / 1024 / 1024 < 10
  if (isLt1M) {
    this.file = file
    return true
  }
  this.$message.warning('请上传不超过10M的文件.')
  return false
}

总结:accept属性只是为了快捷选择后缀名为accept值的文件,与校验文件没有任何关系!!!

校验文件和文件大小自己乖乖写吧(别偷懒,上面代码复制到自己项目就ok了)。通过这种强制校验,直接弹框告诉他'仅支持.xls和.xlsx文件'
最开始提到的.url文件暂时也无法解决校验的问题。如果此文件无法链接到一个正确的网页的话那么会提示上传失败,如果链接到一个正确的网页那么在上传的时候会默认下载,不会进行文件上传的操作,也不会进入我们的beforeUpload钩子中

我也去element官方上传了Internet快捷方式试了,也是同样的问题。我猜想这个上传文件调起了操作系统的窗口,在上传文件之前,操作系统对文件做的一系列操作是element无法阻止的和访问的,所以这个问题element无法解决,另外不知道大家有没有注意到,上传文件的窗口在进行文件提交时,按钮是打开而非上传
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐