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

悠讓
  • 216

image.png
我只想选图片,前端能禁掉这东西吗。

回复
阅读 546
2 个回答

建议用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>

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

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

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

https://developer.mozilla.org...
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏