博客站

在 UniApp 中，图片上传是一个常见的需求。UniApp 提供了 uni.chooseImage 和 uni.uploadFile API 来实现图片选择和上传功能。以下是 UniApp 处理图片上传的详细步骤：

一、选择图片

1. 使用 uni.chooseImage

• uni.chooseImage 用于从相册或相机中选择图片。
• 示例：

  uni.chooseImage({
    count: 1, // 最多选择的图片数量
    sizeType: ['original', 'compressed'], // 图片类型
    sourceType: ['album', 'camera'], // 图片来源
    success: (res) => {
      const tempFilePaths = res.tempFilePaths; // 图片的临时文件路径
      console.log('选择的图片：', tempFilePaths);
    }
  });
  

二、上传图片

1. 使用 uni.uploadFile

• uni.uploadFile 用于将本地文件上传到服务器。
• 示例：

  uni.chooseImage({
    success: (chooseRes) => {
      const tempFilePaths = chooseRes.tempFilePaths;
      uni.uploadFile({
        url: 'https://example.com/upload', // 上传接口地址
        filePath: tempFilePaths[0], // 图片的临时文件路径
        name: 'file', // 文件对应的 key
        formData: {
          // 其他表单数据
          userId: '123'
        },
        success: (uploadRes) => {
          console.log('上传成功：', uploadRes.data);
        },
        fail: (err) => {
          console.log('上传失败：', err);
        }
      });
    }
  });
  

三、处理上传进度

1. 监听上传进度

• 通过 progress 回调函数监听上传进度。
• 示例：

  uni.uploadFile({
    url: 'https://example.com/upload',
    filePath: tempFilePaths[0],
    name: 'file',
    progress: (res) => {
      console.log('上传进度：', res.progress);
    },
    success: (uploadRes) => {
      console.log('上传成功：', uploadRes.data);
    }
  });
  

四、多图上传

1. 选择多张图片

• 通过 count 参数选择多张图片。
• 示例：

  uni.chooseImage({
    count: 3, // 最多选择 3 张图片
    success: (res) => {
      const tempFilePaths = res.tempFilePaths;
      console.log('选择的图片：', tempFilePaths);
    }
  });
  

2. 上传多张图片

• 使用循环或 Promise.all 上传多张图片。
• 示例：

  uni.chooseImage({
    count: 3,
    success: (chooseRes) => {
      const tempFilePaths = chooseRes.tempFilePaths;
      const uploadTasks = tempFilePaths.map((filePath) => {
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: 'https://example.com/upload',
            filePath,
            name: 'file',
            success: (uploadRes) => resolve(uploadRes.data),
            fail: (err) => reject(err)
          });
        });
      });
  
      Promise.all(uploadTasks)
        .then((results) => {
          console.log('所有图片上传成功：', results);
        })
        .catch((err) => {
          console.log('图片上传失败：', err);
        });
    }
  });
  

五、处理服务器响应

1. 解析服务器返回的数据

• 服务器返回的数据通常是 JSON 格式，可以使用 JSON.parse 解析。
• 示例：

  uni.uploadFile({
    url: 'https://example.com/upload',
    filePath: tempFilePaths[0],
    name: 'file',
    success: (uploadRes) => {
      const responseData = JSON.parse(uploadRes.data);
      console.log('服务器返回的数据：', responseData);
    }
  });
  

六、总结

UniApp 处理图片上传的步骤如下：

1. 选择图片：使用 uni.chooseImage 从相册或相机中选择图片。
2. 上传图片：使用 uni.uploadFile 将图片上传到服务器。
3. 处理上传进度：通过 progress 回调函数监听上传进度。
4. 多图上传：使用循环或 Promise.all 上传多张图片。
5. 处理服务器响应：解析服务器返回的数据。

以下是一个完整的图片上传示例：

uni.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: (chooseRes) => {
    const tempFilePaths = chooseRes.tempFilePaths;
    uni.uploadFile({
      url: 'https://example.com/upload',
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        userId: '123'
      },
      progress: (res) => {
        console.log('上传进度：', res.progress);
      },
      success: (uploadRes) => {
        const responseData = JSON.parse(uploadRes.data);
        console.log('上传成功：', responseData);
      },
      fail: (err) => {
        console.log('上传失败：', err);
      }
    });
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的图片上传功能，满足应用的需求。