Uniapp 如何实现文件上传

在 Uniapp 开发中，文件上传是一个常见需求，掌握这一功能对于打造功能丰富的应用至关重要。下面我们就来详细探讨如何在 Uniapp 里实现文件上传。

了解 Uniapp 提供的上传 API。Uniapp 主要通过 uni.uploadFile 方法来实现文件上传功能。该方法接受一个对象参数，包含诸如 url（上传的服务器地址）、filePath（要上传的文件路径）、name（服务器端接收文件的字段名）等必填项。

准备工作不容忽视。在进行文件上传前，需要获取要上传的文件路径。这通常通过 uni.chooseFile 方法实现。它能唤起系统的文件选择器，让用户选择本地文件，选择后会返回文件的临时路径。例如：

uni.chooseFile({
  count: 1,
  success: (res) => {
    const filePath = res.tempFilePaths[0];
    // 后续可在此处调用上传方法
  }
});

接下来是核心的上传部分。获取到文件路径后，就可以调用 uni.uploadFile 进行上传。示例代码如下：

const filePath = '获取到的文件临时路径';
uni.uploadFile({
  url: '服务器上传接口地址',
  filePath: filePath,
  name: 'file',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('文件上传成功', res.data);
    } else {
      console.log('文件上传失败', res.statusCode);
    }
  },
  fail: (err) => {
    console.log('上传出错', err);
  }
});

在上述代码中，url 需替换为实际的服务器接口地址，name 对应服务器端接收文件的字段名。

为了提升用户体验，还可以添加上传进度的监听。uni.uploadFile 提供了 progress 回调函数来实现这一功能。示例如下：

uni.uploadFile({
  // 其他配置项
  progress: (res) => {
    console.log('上传进度', res.progress);
  }
});

通过上述步骤，就能在 Uniapp 应用中顺利实现文件上传功能。从获取文件路径到执行上传操作，再到监听上传进度，每一个环节都紧密相连，共同构建出一个完整的文件上传流程，满足项目中的实际需求。