微信小程序之批量上传并压缩图片的实例代码

微信小程序批量上传并压缩图片的实现实例代码

今天，我们将深入微信小程序中的批量上传并压缩图片的功能。如果你对此感兴趣，那么请仔细阅读以下内容。

在.wxml文件中，我们需要创建一个canvas元素。这个元素将用于承载压缩后的图片，以便在上传时获取。请确保这个canvas元素不隐藏，否则将无法正常工作。你可以通过调整其位置将其移至屏幕外。

```html

```

接下来，让我们转向.js文件，了解如何实现相关功能。

我们有一个`takePhoto`方法，当用户选择该方法时，会触发图片选择操作。该方法首先获取当前已选择的图片列表，然后调用微信提供的`wx.chooseImage`方法，让用户选择图片进行上传。这里我们设置了最大上传数量为4，图片来源可以是相册或相机。

```javascript

takePhoto: function () {

var that = this;

let imgViewList = that.data.imgViewList;

wx.chooseImage({

count: 4, // 最大上传数量

sizeType: ['pressed'], // 图片质量类型

sourceType: ['album', 'camera'], // 图片来源

success: function (res) { // 注意这里应该是success而不是suess

var tempFilePaths = res.tempFilePaths; // 选择后的图片列表

that.getCanvasImg(0, 0, tempFilePaths); // 开始压缩图片

}

});

}

```

接下来是`getCanvasImg`方法，它负责压缩图片并获取压缩后的图片。这里我们使用了递归的方法来解决canvas的draw方法延时的问题。对于选择的每一张图片，我们都将其绘制到canvas上，然后使用`wx.canvasToTempFilePath`方法将canvas内容导出为临时文件路径，然后进行上传。

我们有`uploadCanvasImg`方法，它负责将压缩后的图片上传到服务器。这里我们使用了微信提供的`wx.uploadFile`方法进行文件上传。上传成功后，我们将服务器返回的图片地址添加到列表中，并通过`setData`方法更新界面。

在浩瀚的网络世界中，狼蚁SEO网站如同一座灯塔，照亮着万千寻找优化之道的旅者。我们深知，每一位来访的朋友都带着期待和希望，希望在这里找到适合自身网站的优化方案。我们诚挚地感谢每一位朋友的关注与支持，这份厚爱让我们倍感鼓舞和动力满满。

狼蚁SEO网站始终秉持着为广大学者、站长和SEO爱好者提供优质内容的宗旨。我们深知内容的重要性，因此我们致力于提供生动、丰富、有的文章，为大家带来的SEO资讯和实用的优化技巧。再次感谢大家的支持与关注，我们将不断努力，为大家呈现更好的内容！