Uni-App 图片多重选择及上传-跨端开发真简单

2023-10-19 14:29:39

使用 Uni-App 实现图片多重选择和上传

简介

在构建移动应用程序时，图片上传功能至关重要。Uni-App 提供了便捷的 API，使开发者能够轻松实现图片多重选择和上传。本文将深入探讨 Uni-App 的 uploadFile API，并通过示例演示如何将其用于此目的。

选择图片

首先，我们需要打开图片选择器以允许用户选择要上传的图片。Uni-App 的 chooseImage 方法可用于此目的。该方法接受一个对象作为参数，允许我们配置选择器的选项，例如允许选择的最大图片数量和来源（相机或相册）。

示例代码：

chooseImage() {
  uni.chooseImage({
    count: 9, // 最多选择9张图片
    sizeType: ['original', 'compressed'], // 允许选择原图或压缩图
    sourceType: ['album', 'camera'], // 允许选择来源为相册或相机
    success: (res) => {
      // 返回选定的图片列表
      this.imageList = res.tempFilePaths
    }
  })
}

上传图片

接下来，我们需要上传所选的图片。Uni-App 的 uploadFile 方法用于此目的。该方法接受一个包含以下属性的对象作为参数：

url： 图片上传的地址
filePath： 图片文件的路径
name： 图片文件的名称
header： 可选的 HTTP 请求头
formData： 可选的需要上传的其他表单数据
success： 成功时的回调函数
fail： 失败时的回调函数
complete： 无论成功还是失败，都会触发的回调函数

示例代码：

uploadImage() {
  for (let i = 0; i < this.imageList.length; i++) {
    uni.uploadFile({
      url: 'https://example.com/upload', // 图片上传的地址
      filePath: this.imageList[i], // 图片文件的路径
      name: 'file', // 图片文件的名称
      success: (res) => {
        // 上传成功
      },
      fail: (err) => {
        // 上传失败
      }
    })
  }
}