当前位置：首页 > news >正文

uni-app 如何实现选择和上传非图像、视频文件？

news 来源：原创 2025/6/7 6:08:06

在 uni-app 中实现选择和上传非图像、视频文件，可根据不同端（App、H5、小程序）的特点，采用以下方法：

一、通用思路（多端适配优先推荐）

借助 uni.chooseFile 选择文件，再用 uni.uploadFile 上传，不过部分端有差异，需针对性处理：

1. 选择文件（`uni.chooseFile`）

uni.chooseFile({count: 1, // 可选择文件数量，按需调整type: 'file', // 选择任意类型文件，若想限制类型，可结合 extension 筛选success: (res) => {const tempFilePath = res.tempFiles[0].path; // 获取选中文件的临时路径// 后续可执行上传等操作},fail: (err) => {console.error('选择文件失败：', err);}
});

参数说明：
- count：控制最多选几个文件，按需设值。
- type：设为 'file' 可选择非媒体文件；若想限定特定类型（如文档），可搭配 extension（H5 端支持），例 extension: ['.pdf', '.docx'] ，不过 App 和小程序端对 extension 支持度欠佳，复杂类型筛选可结合后续服务端校验。
- 选中后，res.tempFiles 里存文件信息，含临时路径 path 、文件名 name 、大小 size 等。

2. 上传文件（`uni.uploadFile`）

拿到选择的文件临时路径后，用 uni.uploadFile 上传到服务器：

uni.uploadFile({url: 'https://your-server.com/upload', // 实际的服务端文件上传接口filePaths: [tempFilePath], // 前面选择文件得到的临时路径name: 'file', // 与服务端约定的接收文件的字段名formData: {// 可附带其他业务参数，如用户 ID、文件分类等userId: '123',category: 'document'},success: (uploadRes) => {const data = JSON.parse(uploadRes.data);console.log('上传成功，服务端返回：', data);// 可依据服务端返回做后续处理，如更新文件列表、提示用户等},fail: (err) => {console.error('上传失败：', err);}
});

注意事项：
- url 要替换成真实的服务端上传接口地址，需服务端配合实现文件接收逻辑（如 Node.js + Express 用 multer 中间件、Java 用 Spring Boot 的文件上传解析等）。
- name 字段要和服务端接口约定一致，否则服务端无法正确识别文件。
- 若需更灵活的请求头设置、进度监听等，可结合 uni.request 自己构建上传逻辑（把文件转成二进制流等方式），不过 uni.uploadFile 已封装常见场景，优先推荐。

二、App 端特殊处理（解决兼容性问题）

若 uni.chooseFile 在 App 端选非媒体文件有兼容性问题（如部分安卓机型选特定文件失败），可借助 5+App 的 plus.io.chooseFile 实现：

1. 选择文件（`plus.io.chooseFile`）

// 仅 App 端有效，需判断平台后使用
if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {plus.io.chooseFile({title: '选择文件', // 选择文件的标题提示filter: '*', // 筛选文件类型，* 表示所有，也可设 '.pdf,.docx' 等multiple: false // 是否多选},(res) => {const fileInfo = res.files[0]; // 获取选中的文件信息const localPath = fileInfo.path; // 文件本地路径// 可通过 plus.io 进一步操作文件，如读取内容、转成可上传的格式// 示例：转成临时文件路径，用于 uni.uploadFileconst tempFilePath = plus.io.convertLocalFileSystemURL(localPath); // 执行上传等操作},(err) => {console.error('选择文件失败：', err);});
}

优势：对 App 端文件系统兼容性更好，能处理一些 uni.chooseFile 覆盖不到的特殊文件选择场景（如安卓分区存储下的文件）。
不足：是 5+App 专有 API，H5 和小程序端无法使用，需做平台判断，增加代码复杂度。

2. 上传文件

拿到文件路径后，同样可用 uni.uploadFile 上传，若遇到文件格式不兼容问题（如服务端需特定二进制流），可先用 plus.io 读取文件内容转成合适格式再上传：

plus.io.resolveLocalFileSystemURL(localPath, (entry) => {entry.file((file) => {const fileReader = new plus.io.FileReader();fileReader.onloadend = (e) => {const buffer = e.target.result; // 文件内容的 Buffer 数据// 若服务端需要 FormData 格式，可构造后用 uni.request 上传const formData = new FormData();formData.append('file', new Blob([buffer]), file.name); uni.request({url: 'https://your-server.com/upload',method: 'POST',header: {'Content-Type': 'multipart/form-data'},data: formData,success: (res) => {console.log('上传成功：', res.data);}});};fileReader.readAsArrayBuffer(file);});
});

三、H5 端补充（利用浏览器特性）

H5 端除了用 uni.chooseFile ，还可直接用 HTML 原生的 <input type="file"> 实现更灵活的文件选择（若 uni.chooseFile 样式、功能满足不了需求时）：

1. 在页面中添加 input 元素（可通过条件编译仅在 H5 端显示）

<template><view><!-- #ifdef H5 --><input type="file" style="display: none;" ref="fileInput" @change="handleFileChange" /><button @click="openFileSelector">选择文件</button><!-- #endif --></view>
</template><script>
export default {methods: {openFileSelector() {this.$refs.fileInput.click(); // 触发文件选择框},handleFileChange(e) {const file = e.target.files[0]; // 获取选中的文件const fileReader = new FileReader();fileReader.onload = (event) => {const fileContent = event.target.result; // 文件内容，可转成 Base64 等// 若要上传，可构造 FormData 用 uni.request 或 axios 等上传const formData = new FormData();formData.append('file', file);uni.request({url: 'https://your-server.com/upload',method: 'POST',header: {'Content-Type': 'multipart/form-data'},data: formData,success: (res) => {console.log('上传成功：', res.data);}});};fileReader.readAsArrayBuffer(file);}}
}
</script>

特点：完全基于浏览器原生能力，自定义程度高，可灵活控制文件选择后的处理流程（如读取文件内容预览、做加密等），但需自己处理多端兼容（仅 H5 端能用），且样式需自己调整。

四、小程序端限制与适配

小程序端 uni.chooseFile 本质是调用各小程序平台的文件选择 API，整体流程和前面通用方法一致，但有以下限制：

文件类型与大小：不同小程序平台对可选择的文件类型、大小有约束（如微信小程序限制单文件最大 100MB 等），需在开发时注意。
接口能力：uni.uploadFile 需配置合法域名，且服务端要做相应跨域等配置，否则无法上传成功。

五、方案推荐与总结

优先推荐：用 uni.chooseFile + uni.uploadFile 的通用方案，多端兼容性较好，能覆盖大部分场景（如上传文档、压缩包等非媒体文件），简单易实现。
App 端特殊场景：若通用方案有兼容性问题（如选文件失败），补充 plus.io.chooseFile 的方式，增强对 App 端文件系统的适配。
H5 端自定义需求：结合原生 <input type="file"> 实现更灵活的文件选择和预处理逻辑。

实际开发中，建议先尝试通用方案，遇到特定端问题（如 App 端选某些文件报错、H5 端样式不满意），再针对性用对应补充方案解决，同时注意服务端配合做好文件接收、校验逻辑。