使用uniapp开发微信小程序时，难免会用到CDN资源。实现CDN图片存储的方式有两种方式：

第一种是通过将图片传到服务器，再由服务器进行存储，

第二种就是通过前端直接上传到CDN服务商提供的存储空间

接下来介绍一下第二种方式的实现

import COS from 'cos-wx-sdk-v5';
import {
	http
} from '../utils/request.js';

const Bucket = "";
const Region = "";

/**
 * 批量上传图片到COS（小程序专用版）
 * 传入包含一个images数组的对象，images数组每个元素都包含file_name和file_size
 * file_name是小程序文件临时路径，file_size为文件大小,两个变量为必需
 * @param {{images: Array<{file_name: string, file_size: number}>}} files - 包含images数组的对象
 
 * 返回一个Promise，解析为包含上传结果的数组
 * 数组元素结构{
 *    url: string            上传成功后的图片访问URL
 *    originName: string     原始文件名
 *}
 * @returns {Promise<Array<{url: string,originalName: string}>>} 上传结果数组
 */
export function uploadImgToCos(files) {
	return new Promise(async (resolve, reject) => {
		try {
			// 1. 检查是否有文件需要上传
			if (!files?.images?.length) {
				return resolve([]);
			}

			// 2. 获取临时密钥
			const credentialRes = await http.post(url, files, {
				headers: {
					'Content-Type': 'application/json'
				},
			});

			// 3. 验证响应数据
			if (credentialRes.statusCode !== 200 || !credentialRes.data?.data) {
				throw new Error(credentialRes.data?.message || '获取临时凭证失败');
			}

			const credentials = credentialRes.data.data;
			console.log("临时密钥表", credentials);

			// 4. 获取文件信息并上传
			const uploadPromises = await Promise.all(files.images.map(async (file, index) => {
				const cred = credentials[index];
				const cos = new COS({
					SecretId: cred.tmp_secret_id,
					SecretKey: cred.tmp_secret_key,
					SecurityToken: cred.session_token,
				});

				return new Promise((resolveUpload, rejectUpload) => {
					cos.uploadFile({
						Bucket,
						Region,
						Key: cred.cos_key,
						FilePath: file.file_name,
						onProgress: (progress) => {
							console.log(
								`文件 ${index} 上传进度: ${(progress.percent * 100).toFixed(2)}%`
							);
						}
					}, (err, data) => {
						if (err) {
							rejectUpload(
								`文件 ${file.name} 上传失败: ${err.message}`);
						} else {
							resolveUpload({
								originalName: file.file_name,
								url: `https://${data.Location}`,
							});
						}
					});
				});
			}));
			const results = await Promise.all(uploadPromises);
			resolve(results);

		} catch (error) {
			console.error('上传失败:', error);
			reject(typeof error === 'string' ? error : error.message || '上传失败');
		}
	});
}

代码如上，代码封装了一个COS图片直传的通用请求方法，核心思路如下：

第一步：使用 npm install cos-wx-sdk-v5 命令，安装SDK，并且在需要的地方引入：import COS from 'cos-wx-sdk-v5'

第二步：传入需要的参数发送后端请求，获取到tmp_secret_id（临时访问密钥ID）、tmp_secret_key（临时访问密钥）、session_token（安全令牌），以及其他必须参数

第三步：初始化腾讯云对象存储的JavaScript SDK，创建一个COS的客户端实例，用于后续与腾讯云COS服务进行交互

第四步：使用腾讯云COS SDK的 uploadFile 方法上传文件，进行对象存储，其中要传入的参数有：Bucket（存储桶名称）、Region（存储桶所在区域）、Key（文件在 COS 存储桶中的存储路径和文件名）、FilePath（本地文件的临时路径）。获取返回后的数据，得到图片对象存储的路径进行使用

使用前端COS直传的方式，优势在于能够减少服务器压力，并且减少后端请求流量的使用，适用于高并发上传和大文件上传的情景