浏览器上传文件 所有文件(*.*) 能去掉吗

Question

我只想选图片，前端能禁掉这东西吗。

Answer 1

建议用elementUI的上传

 <el-upload
   action="none" //自带的post请求（必填，需要自定义设为一个字符串）
   :http-request="updateImg" //自定义上传方法
   :limit="1" //限制为1个
   :show-file-list="false" //是否显示上传列表
   :before-upload="beforeUpload"
   accept="image/jpeg,image/gif,image/png,image/bmp"> //能选择的文件格式
   <el-button type="primary">上传</el-button>
</el-upload>

<script>
methods: {
    updateImg(val) {
      let formData = new FormData()
      formData.append('files', val.file) //'files'为后端提供的字段名
      console.log(formData, "formData为传给后端的图片对象")
      //后面可以写自定义的post请求
    },


    beforeUpload(file) {
      const isImg = file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/bmp';
        if (!isImg) {
          this.$message.error('上传文件图片只能是图片!');
          return false
        }
    },
}
</script>

Answer 2

Chrome 86 版本后引入了一项新的 File System API，你可以在调用 showOpenFilePicker 方法时指定 excludeAcceptAllOption 参数为 false 来禁用掉“所有文件”。

缺点当然就是兼容性问题了，目前只有 Chrome 86+ 版本支持，其他浏览器都未支持这一特性。

而 <input type="file"> 这种方式的不支持禁用“所有文件”。你要非要想实现类似功能的话可以变通一下，虽然不能禁止用户选择、但你可以在用户选择后阻止上传呀，可以尝试在 onchange 事件里读取一下文件，看它的 blob type 是不是你规定的类型，如果不是则给个警告、阻止后续动作。

https://developer.mozilla.org...