当前位置：首页 > uni-app

uniapp导入文件

2026-02-06 00:47:15uni-app

导入本地文件

在UniApp中导入本地文件可以通过uni.chooseFile API实现。该API允许用户从设备中选择文件，支持图片、视频、音频等多种类型。

uni.chooseFile({
  count: 1, // 选择文件的数量
  type: 'file', // 文件类型，可选值：'image'、'video'、'all'、'file'
  success: (res) => {
    console.log(res.tempFiles); // 返回选择的文件信息
  }
});

上传文件到服务器

选择文件后，通常需要将文件上传到服务器。可以使用uni.uploadFile API实现文件上传功能。

uni.uploadFile({
  url: 'https://example.com/upload', // 服务器地址
  filePath: res.tempFiles[0].path, // 文件路径
  name: 'file', // 后端接收的文件字段名
  success: (uploadRes) => {
    console.log(uploadRes.data); // 上传成功后的返回数据
  }
});

读取文件内容

如果需要读取文件内容，可以使用uni.getFileSystemManager API。该API提供了读取文件内容的方法。

const fs = uni.getFileSystemManager();
fs.readFile({
  filePath: res.tempFiles[0].path,
  encoding: 'utf8', // 编码格式
  success: (fileRes) => {
    console.log(fileRes.data); // 文件内容
  }
});

处理跨平台兼容性

UniApp支持多平台运行，不同平台的文件路径处理可能不同。需要确保文件路径的正确性。

// 处理H5和微信小程序的路径差异
const filePath = res.tempFiles[0].path;
if (process.env.VUE_APP_PLATFORM === 'h5') {
  // H5平台的特殊处理
}

文件类型限制

在导入文件时，可以通过extension参数限制文件类型，确保用户只能选择特定类型的文件。

uni.chooseFile({
  count: 1,
  type: 'file',
  extension: ['pdf', 'doc', 'docx'], // 限制文件类型
  success: (res) => {
    console.log(res.tempFiles);
  }
});

错误处理

在文件导入和上传过程中，可能会遇到各种错误。需要添加错误处理逻辑以提高用户体验。

uni.chooseFile({
  count: 1,
  type: 'file',
  fail: (err) => {
    console.error(err); // 处理选择文件失败的情况
  }
});

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: res.tempFiles[0].path,
  name: 'file',
  fail: (uploadErr) => {
    console.error(uploadErr); // 处理上传失败的情况
  }
});

文件预览

对于图片或PDF等文件，可以使用uni.previewImage或uni.downloadFile API实现文件预览功能。

uniapp导入文件

// 预览图片
uni.previewImage({
  urls: [res.tempFiles[0].path] // 图片路径数组
});

// 下载文件
uni.downloadFile({
  url: res.tempFiles[0].path,
  success: (downloadRes) => {
    console.log(downloadRes.tempFilePath); // 下载后的文件路径
  }
});