小程序COS文件上传

官网地址：对象存储 快速入门-SDK 文档-文档中心-腾讯云

注意！！！谨慎使用此方法，cos-wx-sdk-v5.min.js体量大约有200KB，似乎不支持分包（之前用uni-app使用分包导入，不知道什么原因最后还会归为主包。导致主包过大，小程序无法上传的问题）

若大家的代码可能也会出现上述情况，可以转战：uni-app/微信的COS直传，这是一种不需要引入COS的SDK，进行COS上传的方法

1. 项目引入腾讯云COS上传SDK

cos-wx-sdk-v5.js下载地址：cos-wx-sdk-v5/demo/lib/cos-wx-sdk-v5.js at master · tencentyun/cos-wx-sdk-v5 · GitHub

cos-wx-sdk-v5.min.js下载地址：cos-wx-sdk-v5/demo/lib/cos-wx-sdk-v5.min.js at master · tencentyun/cos-wx-sdk-v5 · GitHub

2. 获取COS上传文件需要用到的数据

前端要使用COS上传文件，需要提前从后端获取到

TmpSecretId：临时密钥的 tmpSecretId

TmpSecretKey：临时密钥的 tmpSecretKey

SecurityToken：临时密钥的 sessionToken，对应 header 的 x-cos-security-token 字段

ExpiredTime：<可选>临时密钥的 expiredTime，超时时刻的时间戳（也可以前端自己定义）

Bucket：自己的bucket桶名称

Region：存储桶所在地域

根据自己项目的接口调用方法，调用后端接口，获取到上述数据

3. 封装COS上传方法（web端/小程序端皆适用）

var COS = require("./cos-wx-sdk-v5.min.js");
const nowTime = new Date();
/**
 * 
 * @param {*} file              文件
 * @param {string} fileName     文件名，例如：'1.jpg'或'test.txt'
 * @param {object} res          COS上传参数{TmpSecretId, TmpSecretId, SecurityToken, Bucket, region}
 * @returns 
 */
export const uploadFileOrPic = (file, fileName, res) => {
  const { TmpSecretId, TmpSecretId, SecurityToken, Bucket, Region } = res;
  // 创建桶的实例
  const cos = new COS({
    // 必选参数
    getAuthorization: (options, callback) => {
      const obj = {
        TmpSecretId,        // 临时密钥的 tmpSecretId
        TmpSecretKey,       // 临时密钥的 tmpSecretKey
        SecurityToken,      // 临时密钥的 sessionToken，对应 header 的 x-cos-security-token 字段（这个是必填的，但是我们后端没给我反，我自己随便填了一个值也能成功）
        ExpiredTime: 4168742400,    // 时间截至: 2100年12月12日00时00分00秒（自己定义）
      };
      callback(obj);
    },
  });
  // 上传图片
  return new Promise((resolve, reject) => {
    cos.uploadFile({
      Bucket, /* 填写自己的 bucket，必须字段 */
      Region,     /* 存储桶所在地域，必须字段 */
      Key: `${nowTime.getFullYear()}-${nowTime.getMonth() + 1}/${new Date().getTime()}${fileName}`, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段。也就是在桶文件中的位置，如果想要放在text文件下，可以定义为text/文件名。文件地址可以前端自己定义，也可以后端返回。 */
      Body: file, // 上传文件对象
    }
  );
};

4. 文件上传

这里用uni-app语法举例：

<template>
    <view>
        <uni-file-picker ref="file" v-model="imgUrl" fileMediatype="image" mode="grid" @select="select" :sizeType="sizeType"></uni-file-picker>
    </view>
</template>
<script>
    import { uploadFileOrPic } from "@/common/uploadFile.js"
    export default {
        data() {
            return {
                imgUrl: null,
                sizeType: ['compressed'], //设置图片压缩
            }
        },
        methods: {
            // 获取上传状态
            async select(e) {
                let flieArr = e.tempFiles
                for (let i = 0; i < flieArr.length; i++) {
                    // 获取图片信息
                    let file = flieArr[i].path;
                    // 调用接口获取文件上传信息
                    const res = await this.$request(cosKey, "post");
                    // 文件上传
                    let _this = this;
                    uploadFileOrPic(file, file, res).then(url => {
                        _this.imgUrl = url
                    })
                }
            }
        }
    }
</script>