微信小程序在上传图片时如何限制大小「附代码」

引言

微信小程序开发工程师经常会遇到需要限制上传图片大小的场景，它常被用于限制用户在上传图片时对带宽和存储的使用。本文将教大家在微信小程序中如何限制上传图片大小，并附上代码示例。

背景知识

在编写代码之前，我们需要了解一些背景知识。

1. 上传图片的方法

微信小程序中，我们可以通过微信官方提供的api `wx.chooseImage` 来选择图片，该方法返回一个本地文件路径的数组。

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
  }
})

2.图片文件大小单位

图片文件的大小通常使用字节为单位，一个字节为8位，1KB（千字节）=1024字节,1MB（兆字节）=1024KB,1GB（千兆字节）=1024MB。

3.压缩图片的方法

压缩图片可以有效地减小图片的文件大小。微信小程序中自带了一个图片处理的api `wx.compressImage`。该方法接受一个图片路径和压缩质量参数，将图片压缩至指定质量。

wx.compressImage({
  src: 'images/1.jpg',
  quality: 80,
  success: function(res) {
    console.log(res.tempFilePath)
  }
})

如何限制上传图片大小

本文将基于上述背景知识，为大家介绍在微信小程序中如何限制上传图片大小。

1.上传前获取图片大小

在选择图片之后，我们需要获取该图片的大小，然后判断是否超出预定的上传大小。为了获取图片大小，我们可以使用 `wx.getFileInfo` api。

wx.getFileInfo({
  filePath: tempFilePaths[0],
  success: function(res) {
    console.log(res.size) // 返回文件大小，单位B
  }
})

注意：需要在 `wx.chooseImage` 回调函数中获取图片路径后再去获取图片大小。

2.压缩图片大小

如果图片大小超出了预定大小，我们可以尝试将图片进行压缩处理，在限制数量内上传压缩后的图片。我们可以使用 `wx.compressImage` api。但是需要注意，压缩后的图片质量会受到影响，所以需要根据实际需求进行设置。

 wx.compressImage({
  src: tempFilePaths[0],
  quality: 50,
  success: function(res) {
    console.log(res.tempFilePath) // 返回压缩后的临时文件路径
  }
})

3.上传图片

在压缩成功后，我们需要将压缩后的图片上传处理。上传图片通常有两种方式：

**a.上传至服务器**

在微信小程序中，我们可以使用 `wx.uploadFile` api 将压缩后的图片上传至服务器，具体方法如下：

wx.uploadFile({
  url: 'url',
  filePath: res.tempFilePath,
  name: 'file',
  formData: {
    'user': 'test'
  },
  success(res) {
    console.log(res);
  },
  fail(res) {
    console.log(res);
  }
})

**b.将图片保存在云存储**

微信小程序云开发免费提供了高速、稳定、安全的对象存储服务，我们可以将压缩后的图片保存在云端，具体方法如下：

const cloudPath = 'example.png' // 文件名称和文件路径
wx.cloud.uploadFile({
  cloudPath: cloudPath,
  filePath: filePath,
  success: res => {
    console.log('上传成功', res)
  },
  fail: err => {
    console.log('上传失败', err)
  }
})

完整代码

下面是一个完整示例代码，该代码可将用户选择的图片进行压缩并上传。

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.getFileInfo({
      filePath: tempFilePaths[0],
      success: function(res) {
        var fileSize = res.size; // 获取图片文件的大小
        if (fileSize <= 1024 * 1024 * 5) { // 判断图片大小是否小于5M
          wx.cloud.uploadFile({
            cloudPath: 'example.png',
            filePath: tempFilePaths[0],
            success: res => {
              console.log('上传成功', res)
            },
            fail: err => {
              console.log('上传失败', err)
            }
          })
        } else { // 图片大于5M，压缩后上传
          wx.compressImage({
            src: tempFilePaths[0],
            quality: 50,
            success: function(res) {
              wx.cloud.uploadFile({
                cloudPath: 'example.png',
                filePath: res.tempFilePath,
                success: res => {
                  console.log('上传成功', res)
                },
                fail: err => {
                  console.log('上传失败', err)
                }
              })
            }
          })
        }
      }
    })
  }
})

总结

限制上传图片大小在微信小程序中是一种常见需求，我们可以使用 `wx.getFileInfo`，`wx.compressImage` 和 `wx.uploadFile` 或 `wx.cloud.uploadFile` 函数来实现这个功能。希望本文可以帮助到你们，有问题或建议，欢迎在评论区留言。