前端 上传文件/照片/视频 到cos(腾讯云) 代码实现

需求 ：将图片上传到 cos中

1.先引入

npm i cos-js-sdk-v5 --save

2.直接看代码

import { MEDIASOURCE } from '@/api';  //自己后端提供的接口
import COS from 'cos-js-sdk-v5'; 
/* 封装的方法，直接调用即可 */
export async function upLoadCosFile(file) {
  return new Promise(async (resolve, reject) => {
    try {
      const { data } = await MEDIASOURCE.get_tmp_cos_key(); //查询COS临时秘钥信息
      const res2 = await MEDIASOURCE.get_cos_sign(file.name); //获取COS签名，uuid生成的cosKey
      var cos = new COS({
        // 必选参数
        getAuthorization: function (options, callback) {
          // 服务端 JS 和 PHP 例子：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
          // 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
          // STS 详细文档指引看：https://cloud.tencent.com/document/product/436/14048
          callback({
            TmpSecretId: data.tmpSecretId,
            TmpSecretKey: data.tmpSecretKey,
            SecurityToken: data.sessionToken,
            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
            StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
            ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
          });
        },
      });
      cos.putObject(
        {
          Bucket: res2.data.bucketName /* 必须 */,
          Region: res2.data.region /* 存储桶所在地域，必须字段 */,
          Key: res2.data.cosKey /* 必须 */,
          Body: file, // 上传文件对象
        },
        async function (err, data) {
          let obj = {
          //自己接口需要用到的参数
            cosKey: res2.data.cosKey,
            fileName: file.name,
            mediaLength: file.size,
          };
          const media_resource = await MEDIASOURCE.save_media_resource(obj); //保存上传资源属性的接口
          resolve(media_resource);
          cos = null;
        },
      );
    } catch (error) {
      reject(error);
    }
  });
}