uniapp如何一次性上传多个不同字段名的文件

在uniapp开发中，如何实现一次性上传多个不同字段名的文件？比如同时上传用户头像（字段名avatar）和身份证照片（字段名id_card）到服务器。使用uni.uploadFile只能传单个文件，如果循环调用又会导致多次请求，有没有办法在一个请求内完成多文件上传且字段名不同？求具体实现方案或插件推荐。

2 回复

使用uni.uploadFile，在formData中传入不同字段名即可：

uni.uploadFile({
  url: '上传地址',
  files: [
    {name: 'avatar', uri: '文件路径1'},
    {name: 'license', uri: '文件路径2'},
    {name: 'idcard', uri: '文件路径3'}
  ],
  formData: {
    '其他参数': '值'
  }
});

注意：files数组中的name就是字段名。


在 UniApp 中一次性上传多个不同字段名的文件，可以通过 uni.uploadFile API 实现。你需要将多个文件分别作为不同的字段添加到 formData 中。以下是具体步骤和示例代码：

实现步骤：

  1. 使用 uni.chooseImage 选择多个文件（例如从相册或相机）。
  2. 遍历文件列表，为每个文件指定不同的字段名。
  3. 调用 uni.uploadFile，在 formData 中设置多个字段，每个字段对应一个文件。

示例代码：

// 选择文件
uni.chooseImage({
  count: 3, // 选择3个文件
  success: (res) => {
    const tempFilePaths = res.tempFilePaths; // 获取临时文件路径数组
    const formData = {};
    
    // 为每个文件分配不同字段名
    tempFilePaths.forEach((filePath, index) => {
      formData[`file${index + 1}`] = filePath; // 字段名如 file1, file2, file3
    });

    // 上传文件
    uni.uploadFile({
      url: 'https://example.com/upload', // 替换为你的服务器地址
      files: Object.keys(formData).map(key => ({
        name: key, // 字段名
        uri: formData[key] // 文件路径
      })),
      formData: {
        // 可添加其他表单数据，如用户ID
        userId: '123'
      },
      success: (uploadRes) => {
        console.log('上传成功', uploadRes.data);
        uni.showToast({ title: '上传成功' });
      },
      fail: (error) => {
        console.error('上传失败', error);
        uni.showToast({ title: '上传失败', icon: 'none' });
      }
    });
  }
});

注意事项：

  • 字段名自定义：在 files 数组中，通过 name 属性设置每个文件的字段名，确保服务器能正确识别。
  • 服务器兼容性：确保后端接口支持多文件上传，并能处理不同字段名的文件。
  • 文件数量限制：根据服务器配置调整 count 参数，避免超出限制。
  • 错误处理：添加 fail 回调处理网络或服务器错误。

如果需要上传其他表单数据（如文本），可在 formData 中添加。此方法适用于上传图片、文档等文件类型。

回到顶部