上传图片 So Easy：一次性上传多张图片到微信小程序不是问题！

前端

2024-01-17 21:27:24

前言

各位开发者，在开发微信小程序时，是否遇到过一次性上传多张图片的难题？相信不少人和我一样，深受这个问题的困扰。然而，今天我要告诉大家，其实微信小程序完全可以一次性上传多张图片，而且方法非常简单。下面，我就来给大家分享一下我的经验。

工具介绍

首先，我们需要借助一款图片上传工具来实现这一功能。我个人推荐使用“云片”。这是一款非常方便的工具，不仅支持多图上传，还可以对图片进行压缩、裁剪等处理。

操作步骤

1. 注册云片账号

登录云片官网（https://www.yunpian.com/），注册一个账号。

2. 创建应用

登录成功后，点击“我的应用”，然后点击“创建应用”，选择小程序类型，填写应用名称、应用等信息，最后点击“创建”。

3. 获取AppKey

创建应用成功后，在应用详情页点击“应用密钥”，即可看到AppKey。将AppKey复制下来，稍后我们需要用到。

4. 集成云片SDK

将云片SDK下载到本地，然后将其解压到小程序项目目录的根目录下。

5. 配置云片SDK

在小程序项目目录的根目录下找到app.js文件，并在其中加入以下代码：

// 引入云片SDK
const upyun = require('./libs/upyun-wxapp-sdk.js');

// 初始化云片SDK
upyun.config({
  bucket: '你的云片空间名称',
  operator: '你的云片操作员名称',
  password: '你的云片密码'
});

6. 上传图片

在需要上传图片的地方，使用upyun.upload()方法即可。例如：

// 选择图片
wx.chooseImage({
  count: 9, // 最多可以同时选择9张图片
  success: function(res) {
    // 上传图片
    upyun.upload({
      localPaths: res.tempFilePaths, // 要上传的图片的本地路径列表
      success: function(res) {
        // 上传成功
        console.log('上传成功', res);
      },
      fail: function(err) {
        // 上传失败
        console.log('上传失败', err);
      }
    });
  }
});