关于原生input上传文件，设置了限制，winods还能上传其他文件

最新推荐文章于 2024-08-12 16:30:53 发布

我不是靓仔啊

最新推荐文章于 2024-08-12 16:30:53 发布

阅读量572

点赞数

文章标签：其他 javascript 前端 vue.js

本文链接：https://blog.csdn.net/asd2437252087/article/details/123263307

版权

这篇博客讨论了在原型图中使用原生input标签进行文件上传时遇到的问题，即尽管设置了文件类型限制，Windows系统仍允许选择所有文件。作者通过监听change事件，检查上传文件的名称来实现限制，如果文件格式不符合.xlsx或.xls，则警告用户并清除输入值。

摘要由CSDN通过智能技术生成

        <input @change="onUpFile" type="file"   accept=".xlsx, .xls"  />

原生的input现在应该很少用了吧，刚好今天原型图上刚好有一个地方要用原生的input上传，就遇到了windos 在点击上传文件的时候，选择打开所有文件，你会发现做了限制的文件格式还是能上传上去。

这时候我想到的change事件。。,就对上传的文件名称去检索，如果不是限制的文件，我们就不让他上传

onUpFile (e) {
      let file = e.target.files[0]
      console.log(file)
      let flag = ''
      flag = file.name.indexOf('.xlsx' || '.xls') !== -1
      if (flag) {
        this.addForm.importFile = file
      } else {
        this.$Message.warning(this.$t('course.error_10'))
        this.$refs.referenceUpload.value = null
      }