uniapp 文件上传功能如何实现？-uni-app-PHP中文网

uniapp 文件上传功能如何实现？

幻影之瞳

发布： 2024-12-23 22:24:59

原创

937人浏览过

UniApp文件上传的核心在于选择文件（uni.chooseFile）和发送请求（uni.uploadFile）。开发者需充分理解文件上传流程，包括选择文件、发送请求、接收后端响应。进阶考虑：大文件分片上传、错误处理、进度条展示；性能优化：减少请求次数、使用快速网络、压缩文件；踩坑指南：文件类型/大小限制、网络问题、token失效等。

uniapp 文件上传功能如何实现？

UniApp文件上传：不止是简单的代码堆砌

很多开发者在UniApp里折腾文件上传，最后搞得一团糟。为啥？因为他们只看到了表面，没看到背后的坑。这篇文章，咱们就来扒一扒UniApp文件上传的那些事儿，让你不再被它折磨。读完后，你不仅能轻松实现文件上传，还能理解其背后的原理，写出优雅高效的代码。

先说结论：UniApp文件上传没啥高深的，核心是选择文件、发送请求，但魔鬼藏在细节里。

基础知识：你得懂这些

UniApp本身不直接处理文件上传，它需要借助后端接口。所以，你需要一个后端（比如Node.js, Python Flask/Django, Java Spring等等），负责接收文件并存储。前端UniApp只是负责把文件“递”给后端。 UniApp用的是uni.chooseFile选择文件，uni.uploadFile发送文件。别小看这俩API，它们的参数设置和返回结果的处理，决定了你的代码能不能优雅运行。

核心：文件上传的来龙去脉

uni.chooseFile允许用户选择本地文件，返回一个包含文件路径和一些其他信息的数组。关键是tempFilePaths，它包含了临时文件路径。记住，这只是临时路径，文件真正上传成功前，它随时可能消失。

然后，uni.uploadFile拿着这些临时文件路径，向后端发送POST请求。关键参数是filePath（就是tempFilePaths[0]），url（后端接口地址），name（后端接收文件参数名）。别忘了header，很多后端接口需要你带上身份验证信息。

一个简单的例子，让你感受一下：

uni.chooseFile({
  count: 1,
  type: 'file',
  success: (res) => {
    let filePath = res.tempFilePaths[0];
    uni.uploadFile({
      url: '你的后端接口地址',
      filePath: filePath,
      name: 'file',
      header: {
        'Authorization': 'Bearer ' + uni.getStorageSync('token') // 你的token获取方式
      },
      success: (res) => {
        console.log('上传成功', JSON.parse(res.data)); //后端返回结果处理
      },
      fail: (err) => {
        console.error('上传失败', err);
      }
    });
  }
});

登录后复制

进阶：处理大文件和错误

上面的代码太简单了，实际应用中，你需要考虑很多问题。比如，大文件上传，你需要分片上传，避免请求超时。错误处理也至关重要，网络请求可能失败，后端可能返回错误码，你都需要优雅地处理，给用户友好的提示。别忘了进度条，用户需要知道上传进度。

//  模拟分片上传  (简化版，实际应用中需要更复杂的逻辑)
function uploadFileChunk(filePath, chunkSize, start, end, uploadUrl, resolve, reject) {
  const blob = new Blob([new Uint8Array(filePath.slice(start, end))]);
  const formData = new FormData();
  formData.append('file', blob, 'file.txt'); //  文件名需要根据实际情况修改

  uni.request({
    url: uploadUrl,
    method: 'POST',
    data: formData,
    success: (res) => {
      resolve(res);
    },
    fail: (err) => {
      reject(err);
    }
  });
}

登录后复制

性能优化：别让用户等太久

性能优化是永恒的主题。减少请求次数，使用更快的网络，压缩文件大小，都可以提升上传速度。合理的错误处理和用户反馈，也能提升用户体验。

踩坑指南：别让这些坑绊倒你