微信小程序:多张图片上传

微信小程序：多张图片上传攻略

微信小程序中，可以使用 wx.chooseImage() 方法来选择并上传多张图片。以下是使用 wx.chooseImage() 方法的完整攻略：

步骤1：选择图片

首先，您需要使用 wx.chooseImage() 方法选择要上传的图片。以下是一个示例代码片段，演示如 wx.chooseImage() 方法选择图片：

wx.chooseImage({
  count: 3, // 最多可以选择的图片张数
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = resFilePaths;
  }
})

在上面的示例中，我们使用 wx.chooseImage() 方法选择了最多3张图片，并指定了图片的大小类型和来源类型。当选择完成后将返回选定照片的本地文件路径列表。

步骤2：上传图片

接下，您可以使用 wx.uploadFile() 方法将选择的图片上传到服务器。以下是一个示例代码片段，演示如何使用 wx.uploadFile() 方法上传图片：

wx.uploadFile({
  url: 'https://example.com/upload', // 图片的接口地址
  filePath: tempFilePaths[0], // 要上传的图片的本地文件路径
  name: 'file', // 上传图片的名称，后端可以通过这个名称获取文件
  formData: {
    'user': 'test' // 其额外的参数
  },
  success: function (res)    var data = res.data
    // do something
  }
})

在上面的示例中，我们使用 wx.uploadFile() 方法将选择的第一张图片上传到指定的接口地址。我们指定了要上传的图片的本地文件、上传图片名称和其他额外的参数。当上传完成后，将返回上传结果。

示例1：上传多张图片

以下是一个示例代码片段，演示如何上传多张图片：

wx.chooseImage({
  count: 3,
  success: function (res) {
    var tempFilePath = res.tempFilePaths;
    for ( i = 0; i < tempFilePaths.length; i++) {
      wx.uploadFile({
        url: 'https://example.com/upload',
        filePath: tempFilePaths[i],
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: function (res) {
          var data = res.data
          // do something
        }
      })
    }
  }
})

在上面的示例中，我们使用 wx.chooseImage() 方法选择最多3张图片，并使用 for 循环将每张图片上传到指定的接口地址。

示例2：显示进度

以下是一个示例代码片段，演示如何显示上传进度：

wx.uploadFile({
  url: 'https://example.com/upload',
  filePath: tempFilePaths[0],
  name: 'file',
  formData: {
    'user': 'test'
  },
  success: function (res) {
    var data = res.data
    // do something
  },
  fail: function (res) {
    console.log(res)
  },
  complete: function (res) {
    console.log(res)
  },
  progress: function (res) {
    console.log('上传进度：' + res.progress)
    console.log('已经上传的数据长度：' + res.totalBytesSent)
    console.log('预期需要上传的数据总长度：' + res.totalBytesExpectedToSend)
  }
})

在上面的示例中，我们使用 wx.uploadFile() 方法上传图片，并 progress 回调函数显示进度。当上传进度发生变化时，将输出上传度、已经上传的数据长度和预期需要上传的数据总长度。

以上是关于微信小程序多图片上传的完整攻略，包括选择图片、上传图片和两个示例说明。