Vue3使用van-uploader遇到某些安卓机型（小米、vivo、oppo等等）无法上传文件解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3使用van-uploader遇到某些安卓机型（小米、vivo、oppo等等）无法上传文件解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概要

最近在做移动端时遇到个上传附件的需求是只能上传以下类型的文件：

图片文件（jpeg、jpg、png）
文档文件（pdf、txt、doc、docx、xls、xlsx、ppt、pptx）

在这里我用的是有赞的上传组件，但是上线后，发现苹果手机没有问题，反而一些安卓手机都出现了问题，在经过几次的修改，调整了限制文件类型后，就正常上传了！！！可喜可贺，以此记录下解决方法，希望能够帮到大家。

对应的附件格式

图片格式（限制png、jpeg、png）

accept=“image/jpeg,image/png,image/jpg”
jpeg：image/jpeg
png：image/png
jpg：image/jpg

文件格式（限制pdf、doc、docx、ppt、pptx、xls、xlsx）

pdf：application/pdf
doc：application/msword
docx： application/vnd.openxmlformats-officedocument.wordprocessingml.document
ppt：application/vnd.ms-powerpoint
pptx：application/vnd.openxmlformats-officedocument.presentationml.presentation
xls： application/vnd.ms-excel
xlsx：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

文本格式（限制txt）

txt：text/plain

文件格式（限制zip和rar）

zip：application/zip
rar：application/x-rar-compressed

组件封装

提示：这里用来判断是否包含限制类型、文件大小是否符合标准

<template>
  <van-uploader
    ref="uploaderRef"
    :before-read="beforeRead"
    :accept="acceptType"
    :max-size="maxSize"
    :max-count="maxCount"
    preview-size="55px"
  >
    <span class="text">{{
      text
    }}</span>
  </van-uploader>
</template>

<script lang="ts" setup>
import { Notify, Toast } from 'vant'
import fileApi from '~/api/file'
const uploaderRef = ref() // 文件实例
interface uploadProps {
  acceptType?: string // 接受类型
  limit?: number // 限制文件个数
  maxSize?: number // 文件大小限制
  text?: string
  fileExtension?: string // 文件后缀名
  imgExtension?: string // 图片后缀名
  maxCount?: number
}

interface fileItem {
  fileName: string
  fileUrl: string
  fileType: string
  size: number
  isImage?: boolean
  id?: string
  businessId?: string
  createTime?: string
  unit?: string
}

const emits = defineEmits(['success', 'delete',])
const props = withDefaults(defineProps<uploadProps>(), {
  text: '上传附件',
  limit: 10,
  maxSize: 200,
  maxCount: 99,
  acceptType:
    'image/jpeg, image/jpg, image/png, text/plain, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation ,application/pdf',
  fileExtension: 'pdf, txt, doc, docx, xls, xlsx, ppt, pptx',
  imgExtension: 'jpeg/jpg/png',
  fileList: () => [],
  showUploadBtn: true,
  type: 'add',
})

// 获得文件后缀名
const getFileExtension = (name: string) => {
  const extension = name.substring(name.lastIndexOf('.') + 1).toLowerCase() // 文件后缀
  return extension
}

// 文件上传钩子
const beforeRead = (file: any) => {
  const extension = file.name
    .substring(file.name.lastIndexOf('.') + 1)
    .toLowerCase() // 文件后缀
    
  // 判断是否图片类型
  const isImage = props.imgExtension.includes(extension)
  // 判断是否超过最大上传限制，当前限制了200m
  const isMax = file.size / 1024 / 1024 < props.maxSize
  if (!isMax) {
    Notify({
      type: 'danger',
      message: `文件大小上限为${props.maxSize}M`,
      duration: 1000,
    })
    return false
  }
  // 限制上传类型
  const isLimit = props.fileExtension.includes(extension) || props.imgExtension.includes(extension)
  if (!isLimit) {
    Notify({
      type: 'danger',
      message: `文件上传格式不正确`,
      duration: 1000,
    })
    return false
  }
  // 通过校验后执行上传文件方法
  uploadFile(file)
  return true
}

// 唤醒上传文件功能
const openUploader = () => {
  uploaderRef.value.chooseFile()
}

const deleteList = (index: number) => {
  emits('delete', index)
}

// 上传文件
const uploadFile = async (file: File) => {
  Toast.loading({
    duration: 0,
    message: '上传中...',
    forbidClick: true,
  })
  const formData = new FormData()
  formData.append('file', file)
  formData.append('transfer', '0')
  const { code, data } = await fileApi.uploadFile(formData) // 这里替换成实际项目中的api名称
  const extension = file.name
    .substring(file.name.lastIndexOf('.') + 1)
    .toLowerCase() // 文件后缀
  const isImage = props.imgExtension.includes(extension)
  if (code.value === 0) {
    const fileData = {
      fileName: file.name,
      fileUrl: data.value.message, // 图片回显
      size: file.size,
      fileType: getFileExtension(file.name),
      isImage,
      unit: 'KB',
    }
    // 抛出成功信息
    emits('success', fileData)
    Notify({
      type: 'success',
      message: `上传成功`,
      duration: 1000,
    })
    Toast.clear()
    return true
  } else {
    Notify({
      type: 'danger',
      message: `上传失败`,
      duration: 1000,
    })
    Toast.clear()
  }
}

defineExpose({
  openUploader,
})
</script>
<style lang="less" scoped>
.text {
  color: #86909c;
  font-size: 15px;
  display: inline-block;
}
</style>