微信小程序中如何上传图片「代码示例」

1.介绍

微信小程序中有时需要用户上传图片，比如头像、作品等。本文将介绍如何在微信小程序中上传图片。

2.准备工作

为了上传图片，需要调用微信小程序提供的API：wx.chooseImage()。 在使用之前，需要在微信公众平台上获取小程序的AppID，并在app.js中进行注册。

// app.js中进行注册
App({
  onLaunch: function () {
    wx.login({
      success: function (res) {
        if (res.code) {
          // 发起网络请求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

3.上传图片

使用wx.chooseImage()函数选择图片并进行上传。以下是一个示例：

var that = this
wx.chooseImage({
  count: 1, // 最多可以选择的图片张数，默认9
  sizeType: [ 'original', 'compressed' ], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: [ 'album', 'camera' ], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://test.com/upload', // 上传接口
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function (res) {
        var data = res.data
        //do something
      },
      fail: function (res) {
        console.log('上传失败')
      },
    })
  }
})

上述代码中的wx.chooseImage()函数用于选择图片，wx.uploadFile()函数用于上传图片。在其中，filePath是要上传的图片路径，name是对应的服务器端的文件名称。formData可以添加一些额外的数据，比如用户id等。

4.扩展

4.1 图片压缩

在进行图片上传时，如果图片过大，将会消耗大量的网络流量和服务器端的存储空间。为此，可以对图片进行压缩。以下是一个示例：

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.getImageInfo({
      src: tempFilePaths[0],
      success: function (res) {
        var ctx = wx.createCanvasContext('canvas')
        var ratio = 2
        var canvasWidth = res.width // 图片原始长宽
        var canvasHeight = res.height
        while (canvasWidth / ratio > 512) { // 保证宽高均在512以内
          canvasWidth /= 2
          canvasHeight /= 2
        }
        that.setData({
          canvasWidth: canvasWidth,
          canvasHeight: canvasHeight
        })
        ctx.clearRect(0, 0, canvasWidth, canvasHeight)
        ctx.drawImage(tempFilePaths[0], 0, 0, canvasWidth, canvasHeight)
        ctx.draw(false, function () {
          wx.canvasToTempFilePath({
            canvasId: 'canvas',
            success: function (res) {
              wx.uploadFile({
                url: 'https://test.com/upload', // 上传接口
                filePath: res.tempFilePath,
                name: 'file',
                formData: {
                  'user': 'test'
                },
                success: function (res) {
                  var data = res.data
                  //do something
                },
                fail: function (res) {
                  console.log('上传失败')
                },
              })
            },
            fail: function (res) {
              console.log(res)
            }
          })
        })
      }
    })
  }
})

上述代码中，使用wx.getImageInfo()获取图片信息，然后根据图片大小进行等比例缩放并压缩，最后用wx.canvasToTempFilePath()函数将压缩后的图片转成临时文件。

4.2 显示图片

使用wx.previewImage()函数预览图片，以下是一个示例：

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

其中current是当前显示的图片链接，urls是需要预览的图片链接列表。

4.3 上传进度

在上传大文件时，需要显示上传进度，以方便用户了解上传进度。为此，可以使用wx.uploadFile()函数中的进度回调函数（并不是success和fail回调函数），以下是一个示例：

wx.uploadFile({
  url: 'https://test.com/upload', // 上传接口
  filePath: tempFilePaths[0],
  name: 'file',
  formData: {
    'user': 'test'
  },
  success: function (res) {
    var data = res.data
    //do something
  },
  fail: function (res) {
    console.log('上传失败')
  },
  complete: function (res) {
    console.log(res)
  },
  progress: function (res) {
    console.log('上传进度' + res.progress)
  }
})

上述代码中，使用progress回调函数获取上传进度。

总结

本文通过介绍微信小程序中图片上传的方法，帮助开发者了解如何在小程序中处理图片上传相关的问题。在实际开发中，还需要按照需求进行灵活运用。