HarmonyOS NEXT开发进阶（十八）：附件上传功能无法选择pdf文档？

文章目录

- 一、问题描述
- 二、问题分析
- - 2.1 accept
  - 2.2 唯一文件类型说明符
- 三、解决方案
- 四、总结
- 五、参考文档

一、问题描述

项目组在应用vant进行H5项目开发功测阶段，出现纯血鸿蒙系统在上传附件时无法查看doc、docx、pdf等文档。代码示例如下：

bash 复制代码

 <van-uploader class="upload-tipTest" :after-read="afterRead" v-if="pageParams.maxNum > preList.length">
  <img class="add-icon" :src="plusIcon" />
  <div class="add-title">添加附件</div>
</van-uploader>

二、问题分析

经参照Vant2 Uploader文件上传文档，其官方文档有如下介绍：

注意：accept、capture 和 multiple 为浏览器 input 标签的原生属性，移动端各种机型对这些属性的支持程度有所差异，因此在不同机型和 WebView 下可能出现一些兼容性问题。

注意：van-uploader 中 accept 为允许上传的文件类型，默认值为：image/*。代表支持选择"任何图片文件"。

再继续看下对浏览器input标签的介绍，

带有 type="file" 的 <input> 元素允许用户可以从他们的设备中选择一个或多个文件。选择后，这些文件可以使用提交表单的方式上传到服务器上，或者通过 Javascript 代码和文件 API 对文件进行操作。

其accept属性介绍如下：

2.1 accept

accept 属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的唯一文件类型说明符列表。由于给定的文件类型可以用多种方式指定，因此当你需要给定格式的文件时，提供一组完整的类型指定符是非常有用的。

例如，可以通过多种方式识别 Microsoft Word 文件，因此接受 Word 文件的网站可能使用像这样的 <input>：

bash 复制代码

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

2.2 唯一文件类型说明符

唯一文件类型说明符是一个字符串，表示在 file 类型的 <input> 元素中用户可以选择的文件类型。每个唯一文件类型说明符可以采用下列形式之一：

一个以英文句号（"."）开头的合法的不区分大小写的文件名扩展名。例如：.jpg、.pdf 或 .doc。
一个不带扩展名的 MIME 类型字符串。
字符串 audio/*，表示"任何音频文件"。
字符串 video/*，表示"任何视频文件"。
字符串 image/*，表示"任何图片文件"。
accept 属性的值是包含一个或多个（用逗号分隔）唯一文件类型说明符的字符串。例如，一个文件选择器需要能被表示成一张图片的内容，包括标准的图片格式和 PDF、DOC 文件，大概是这样的：

bash 复制代码

<input type="file" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt" />

三、解决方案

通过设置accept属性，支持设定的文档类型，例如：accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt"

四、总结

前端项目开发阶段，应用H5实现移动应用功能可以解决多端原生开发工作量大、多技术栈技能要求高等诸多问题，但同时还必须意识到H5相关属性在原生端存在适配兼容性问题，需开展兼容性适配测试。

五、参考文档

《Vant2 Uploader文件上传》