van-uploader加了accept,需要去做文件预处理,也就是要加上before-read,如果不加,就会导致点击无反应
原代码:
<van-field label="文件上传">
<template #input>
<van-uploader accept="image/*" v-model="images" :max-count="1"
:after-read="afterRead" />
</template>
</van-field>
修改后的代码:
<van-field label="文件上传">
<template #input>
<!-- 上传组件要兼容安卓,必须设置before-read对文件进行预处理 -->
<van-uploader :before-read="beforeRead" accept="image/*" v-model="images" :max-
count="1" :after-read="afterRead" />
</template>
</van-field>
修改后加的js部分:
const acceptType = ref(['jpeg','png','jpg', 'pjeg', 'gif', 'x-png'])
const beforeRead = (file) => {
const extension =
.substring(('.') + 1)
.toLowerCase()
// 判断是否超过最大上传限制,当前限制了200m
const isMax = / 1024 / 1024 < 200
if (!isMax) {
showFailToast(`文件大小上限为200M`)
return false
}
// 判断是否图片类型
const isImage = (extension)
if (!isImage) {
showFailToast(`文件上传格式不正确`)
return false
}
// 调用文件上传接口
afterRead(file)
return true
}
const afterRead = (file) => {
const forms = new FormData()
("type", 'image')
("file", )
// 调用自己的接口
(forms).then(res => {
// 这里对file内的字段赋值后会同步到van-uploader组件绑定的images,后续要用到上传文件的id时,直接用images就可以
=
}, (err) => {
= 'failed'
= '上传失败'
}).catch(err => {
= 'failed';
= '上传失败'
})
}
但是,经测试,Android11版本以下的手机还是不行,如果有知道解决办法的大佬,欢迎讨论。
参考文章:/zkmblog/p/