云主机测评网云主机测评网云主机测评网

云主机测评网
www.yunzhuji.net

如何使用微信CDN上传图片?

微信cdn上传图片是指通过微信的内容分发网络(cdn)来上传和传输图片,以提高图片加载速度和访问效率。

1、选择图片:通过wx.chooseImage API选择图片,并获取本地路径。

2、读取文件内容:使用wx.getFileSystemManager().readFile将图片转为Base64字符串,或直接读取文件流。

3、调用云函数:通过wx.cloud.callFunction调用云函数,将图片数据传递到云端。

4、上传到云存储:在云函数中,使用cloud.uploadFile将接收到的图片数据上传到微信云存储。

5、返回结果:云函数返回上传后的文件ID或URL,前端可以据此进行后续操作。

下面是具体的实现代码:

// 客户端代码(小程序)
wx.chooseImage({
  count: 3,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
    const tempFilePaths = res.tempFilePaths;
    let promises = [];
    tempFilePaths.forEach((path) => {
      promises.push(new Promise((resolve, reject) => {
        wx.getFileSystemManager().readFile({
          filePath: path,
          encoding: 'base64',
          success(response) {
            wx.cloud.callFunction({
              name: 'quickstartFunctions',
              config: {
                env: 'yourenv'
              },
              data: {
                type: 'uploadPicture',
                file: response.data
              },
              success(res) {
                console.log('Upload success:', res);
                resolve(res);
              },
              fail(err) {
                console.error('Upload failed:', err);
                reject(err);
              }
            });
          }
        });
      }));
    });
    Promise.all(promises).then((results) => {
      console.log('All uploads complete:', results);
    }).catch((error) => {
      console.error('Error in one of the uploads:', error);
    });
  }
});
// 云函数代码(Node.js)
const cloud = require('wxserversdk');
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
});
exports.main = async (event, context) => {
  try {
    return await cloud.uploadFile({
      cloudPath: event.path, // 指定云存储中的路径
      fileContent: Buffer.from(event.file, 'base64') // Base64转Buffer
    });
  } catch (e) {
    return e;
  }
};

代码展示了如何在微信小程序中使用CDN上传图片的基本流程,包括选择图片、读取文件内容、调用云函数以及在云函数中上传图片到云存储。

打赏
版权声明:主机测评不销售、不代购、不提供任何支持,仅分享信息/测评(有时效性),自行辨别,请遵纪守法文明上网。
文章名称:《如何使用微信CDN上传图片?》
文章链接:https://www.yunzhuji.net/xunizhuji/269830.html

评论

  • 验证码