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

对于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无法解决，另外不知道大家有没有注意到，上传文件的窗口在进行文件提交时，按钮是打开而非上传