微信小程序上传图片到服务器的代码

微信小程序上传图片到服务器的代码

在微信小程序开发中，经常会遇到需要上传图片到服务器的问题。本文将详细介绍如何使用微信小程序API实现图片上传功能。

1. 获取图片信息

在上传图片之前，我们需要先将需要上传的图片转换成base64格式，然后再将其传输到服务器，代码如下：

  wx.chooseImage({
    success(res) {
      const tempFilePaths = res.tempFilePaths
      wx.getFileSystemManager().readFile({ // 将图片转换为base64格式
        filePath: tempFilePaths[0],
        encoding: 'base64',
        success(base64Res) {
          const base64Data = 'data:image/png;base64,' + base64Res.data
          // 将base64格式的图片发送到后台服务器
          wx.request({
            url: 'http://localhost:8080/uploadImage',
            method: 'POST',
            data: {
              imgData: base64Data
            },
            success(res) {
              console.log(res.data)
            }
          })
        }
      })
    }
  })

注意：此处的服务器url应该替换为你自己的服务器地址，同时需要在app.json文件中进行配置。

2. 上传图片到服务器

在获取图片信息之后，我们需要将该图片上传到服务器上。上传图片的过程就是将保存在本地的图片传输到服务器中，我们可以使用wx.uploadFile方法来实现，代码如下：

  wx.chooseImage({
    success(res) {
      const tempFilePaths = res.tempFilePaths
      wx.uploadFile({ // 上传图片到服务器
        url: 'http://localhost:8080/uploadImage',
        filePath: tempFilePaths[0], // 要上传的图片地址
        name: 'file', // 上传的文件名称，后台代码按照此名称取文件
        success(uploadRes) {
          console.log(uploadRes.data)
        }
      })
    }
  })

注意：此处的服务器url应该替换为你自己的服务器地址，同时需要在app.json文件中进行配置。

3. 上传表单和图片

在一些复杂的业务场景中，我们需要上传图片的同时还需要上传表单数据，这时候就需要将上传表单和上传图片的操作进行组合。下面代码示例展示了如何实现同时上传表单和图片的功能：

  wx.chooseImage({
    success(res) {
      const tempFilePaths = res.tempFilePaths
      wx.showLoading({
        title: '上传中...',
      })
      wx.uploadFile({ // 上传图片和表单
        url: 'http://localhost:8080/uploadImageAndData',
        filePath: tempFilePaths[0],
        name: 'file',
        formData: {
          'user': 'test' // 表单中需要提交的内容
        },
        success(uploadRes) {
          console.log(uploadRes.data)
          wx.hideLoading()
        },
        fail() {
          wx.hideLoading()
        }
      })
    }
  })

注意：上传表单和上传图片的代码位于同一个wx.uploadFile方法中，同时在formData中定义需要上传的表单数据。

4. 小结

本文详细介绍了如何在微信小程序中上传图片到服务器的实现方案。通过选择图片、将图片转换成base64格式、上传图片和上传表单和图片的代码实例展示，可以帮助开发者快速实现该功能，提高开发效率。