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

概要

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

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

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

对应的附件格式

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

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

2. 文件格式（限制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

3. 文本格式（限制txt）

txt：text/plain

4. 文件格式（限制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>

小结

本文参考来源
上传附件类型统计（accept）日常word、pdf、ppt、excel等

input的type=file上传文件accept中限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式

input的file类型指定上传类型

html ＜input type=file＞上传文件时，accept属性值汇总，支持文件格式，限制文件格式，限制上传图片的格式