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

  • Post category:other

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

微信小程序中,可以使用 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 = res.tempFilePaths;
  }
})

在上面的示例中,我们使用 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 tempFilePaths = res.tempFilePaths;
    for (var 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 回调函数显示上传进度。当上传进度发生变化时,将输出上传度、已经上传的数据长度和预期需要上传的数据总长度。

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