微信小程序基于腾讯云对象存储的图片上传功能

当我们想要实现微信小程序中的图片上传功能时，可以采用腾讯云对象存储（COS）服务，将图片存储在云端，以实现快速上传和访问，同时为小程序提供更好的用户体验。下面是实现该功能的完整攻略：

1. 创建腾讯云COS存储桶

在腾讯云控制台上创建COS存储桶，并记下该存储桶的名称和访问密钥ID和密钥秘钥。

2. 配置小程序

在小程序管理后台添加腾讯云的COS插件，并在小程序代码中引入COS SDK，并在app.js文件中进行初始化：

const COS = require('cos-wx-sdk-v5');
const cos = new COS({
    getAuthorization: async (options, callback) => {
        try {
            const result = await wx.cloud.callFunction({
                name: 'cos-auth',
                data: options,
            });
            callback({
                TmpSecretId: result.result.credentials.tmpSecretId,
                TmpSecretKey: result.result.credentials.tmpSecretKey,
                XCosSecurityToken: result.result.credentials.sessionToken,
                StartTime: result.result.startTime,
                ExpiredTime: result.result.expiredTime,
            });
        } catch (error) {
            console.error('invoke cos-auth error: ', error);
            callback(false);
        }
    },
});

App({
    onLaunch: function () {
        wx.cloud.init({
            env: 'your-env-id',
            traceUser: true,
        });
    },
    cos: cos,
});

其中，your-env-id需要替换为小程序的云开发环境ID。此外，还需在小程序云开发控制台中给出上传图片时当前用户的openid，代码如下：

const { cos } = getApp();

async function getUploadCredentials() {
    const result = await wx.cloud.callFunction({
        name: 'cos-auth',
        data: {},
    });
    return result.result;
}

async function upload(file) {
    const data = await getUploadCredentials();
    const randStr = Math.floor(Math.random() * 1000000).toString();
    const filepath = 'images/' + randStr + '.jpg';

    return new Promise((resolve, reject) => {
        cos.postObject({
            Bucket: data.bucket,
            Region: data.region,
            Key: filepath,
            FilePath: file.path,
            onProgress: function (progressData) {
                console.log(JSON.stringify(progressData));
            },
            onComplete: function (err, data) {
                console.log(err || data);
                if (err) {
                    reject(err);
                } else {
                    resolve(filepath);
                }
            },
        });
    });
}

async function getImageUrl(file) {
    try {
        const filepath = await upload(file);
        return 'https://' + cos.options.Bucket + '.cos.' + cos.options.Region + '.myqcloud.com/' + filepath;
    } catch (error) {
        console.error('upload image error:', error);
        wx.showToast({
            title: '图片上传失败',
            icon: 'none',
        });
        return '';
    }
}

3. 添加云函数

在小程序云开发控制台中新建云函数 cos-auth，用于获取COS上传所需的临时密钥，代码如下：

const { credentials } = require('cos-nodejs-sdk-v5');

exports.main = async (event, context) => {
    const { TENCENTCLOUD_SECRET_ID, TENCENTCLOUD_SECRET_KEY } = process.env;

    return new Promise((resolve, reject) => {
        credentials({
            secretId: TENCENTCLOUD_SECRET_ID,
            secretKey: TENCENTCLOUD_SECRET_KEY,
        }, (error, result) => {
            if (error) {
                console.error('get upload credentials error:', error);
                reject(error);
            } else {
                resolve(result);
            }
        });
    });
};

示例1：在小程序中上传图片到腾讯云COS

我们可以通过小程序内置的图片选择器api，选择一张本地的图片，然后实现将其上传到腾讯云COS，并返回图片链接的功能。下面是一个示例：

const { getImageUrl } = require('../../utils/cos-upload');

Page({
    data: {
        imageUrl: '',
    },
    async chooseImage() {
        const res = await wx.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
        });
        if (res.tempFilePaths && res.tempFilePaths.length > 0) {
            const imageUrl = await getImageUrl(res.tempFiles[0]);
            this.setData({
                imageUrl,
            });
        } else {
            wx.showToast({
                title: '图片选择错误',
                icon: 'none',
            });
        }
    },
});

在这个示例中，我们通过调用wx.chooseImageAPI从本地选择一张图片，然后通过调用getImageUrl方法将该图片上传至腾讯云COS，并获取图片链接。最后，我们将该图片链接保存在数据模型中，以在页面中显示。

示例2：在小程序中显示腾讯云COS中的图片

我们可以通过在小程序中使用<image>标签，直接显示一个腾讯云COS中的图片，代码如下：

<image src="{{imageUrl}}"></image>

在这个示例中，我们通过在<image>标签中使用imageUrl数据模型中的值，直接在小程序中显示腾讯云COS中的图片。