浏览器上传文件 所有文件(*.*) 能去掉吗
我只想选图片,前端能禁掉这东西吗。
回答:
建议用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...
以上是 浏览器上传文件 所有文件(*.*) 能去掉吗 的全部内容, 来源链接: utcz.com/p/936302.html