vant的van-uploader在安卓机中点击无反应问题解决

听摇滚的悟空

已于 2024-06-12 09:21:45 修改

阅读量432

点赞数 2

文章标签： android 开发语言 vue.js html5

于 2024-05-16 15:58:00 首次发布

本文链接：https://blog.csdn.net/njihkj/article/details/138964596

版权

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 = file.name
    .substring(file.name.lastIndexOf('.') + 1)
    .toLowerCase() 

    // 判断是否超过最大上传限制，当前限制了200m
    const isMax = file.size / 1024 / 1024 < 200
    if (!isMax) {
      showFailToast(`文件大小上限为200M`)
      return false
    }
    // 判断是否图片类型
    const isImage = acceptType.value.includes(extension)
    if (!isImage) {
      showFailToast(`文件上传格式不正确`)
      return false
    }
    // 调用文件上传接口
    afterRead(file)
    return true
}

const afterRead = (file) => {
    const forms = new FormData()
    forms.append("type", 'image')
    forms.append("file", file.file)
    // 调用自己的接口
    ProposalApi.uploadFile(forms).then(res => {
    // 这里对file内的字段赋值后会同步到van-uploader组件绑定的images，后续要用到上传文件的id时，直接用images就可以
        file.id = res.id
    }, (err) => {
        file.status = 'failed'
        file.message = '上传失败'
    }).catch(err => {
        file.status = 'failed';
        file.message = '上传失败'
    })
}

但是，经测试，Android11版本以下的手机还是不行，如果有知道解决办法的大佬，欢迎讨论。

参考文章：https://www.cnblogs.com/zkmblog/p/17633134.html