微信小程序图片上传：实现清晰图片直达云端！

前端

2023-05-17 15:53:46

微信小程序图片上传指南：提升用户体验的利器

准备工作

在踏入图片上传的奇妙世界之前，让我们先做好准备工作：

注册微信小程序账号： 如果没有，请注册一个。
创建微信小程序项目： 打开微信开发者工具，开启你的小程序之旅。
引入图片上传库： 通过wx.uploadFile API为你的小程序增添图片上传功能。

代码实现

现在，让我们进入代码实现阶段：

获取图片临时路径： 使用wx.chooseImage API从相册或相机中选择图片，获取其临时路径。
压缩图片： 为了减轻网络负担，可以使用wx.compressImage API对图片进行压缩，缩小文件大小。
上传图片： 利用wx.uploadFile API将压缩后的图片发送到云端。记得指定上传路径和图片临时路径。
获取图片上传结果： 在图片上传完成后，wx.uploadFile API的回调函数中会返回图片上传结果。

示例代码

以下是图片上传的示例代码：

// 获取图片临时路径
wx.chooseImage({
  count: 1, // 最多选择一张图片
  sizeType: ['original', 'compressed'], // 允许原图和压缩图
  sourceType: ['album', 'camera'], // 允许相册和相机
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0]; // 获取第一张图片的临时路径
    // 压缩图片
    wx.compressImage({
      src: tempFilePath, // 要压缩的图片临时路径
      quality: 80, // 压缩质量，0-100
      success: (res) => {
        const compressedFilePath = res.tempFilePath; // 获取压缩后的图片临时路径
        // 上传图片
        wx.uploadFile({
          url: 'https://example.com/upload', // 上传的服务器地址
          filePath: compressedFilePath, // 要上传的图片临时路径
          name: 'file', // 文件名
          success: (res) => {
            // 获取图片上传结果
            const data = JSON.parse(res.data);
            console.log(data.url); // 打印图片的URL地址
          }
        });
      }
    });
  }
});