使用cos-js-sdk-v5腾讯云实现cos文件上传

官方地址
快速入门

1. 封装uploadFile.ts

安装命令

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

import COS from "cos-js-sdk-v5";
import axios from "axios";

const url = ""; // 获取oss基本信息接口地址，这个根据公司来，有些公司不需要请求，公司负责人直接给你，我这里需要请求才能拿到oss基本配置信息
let percentNum = 0;

/**
 * 生成随机数
 * @param num 倍数
 * @param basic 基数
 * @returns
 */
const randomNum = (num: number, basic: number) => {
  return Math.floor(Math.random() * num + basic);
};

/**
 * 上传图片方法
 * @param file 文件
 * @param callbackPercent 进度值回调函数 这个可以不需要，就是一个进度显示0~100的，我自己写的，oss也有。就是下面的onProgress里面，会返回，上传进度，速度，大小等信息，但个人感觉不太好
 * @param callback 结果回调函数， code 为1是成功，0是失败，data是成功后图片地址
 */
const uploadFile = (file: any, callbackPercent: any, callback: any) => {
  percentNum = randomNum(10, 0); // 0~10
  callbackPercent({ percent: percentNum });
  // 这里走接口，是走我自己公司的接口获取公司的oss配置信息（也就是密钥相关信息），后面要用到，如果公司直接给你，就不需要走接口的
  axios
    .post(url, {参数})
    .then((res: any) => {
      const { data } = res.data;
      percentNum = randomNum(20, 20); // 20 ~ 40
      callbackPercent({ percent: percentNum });
      if (data) {
        // 解构获取oss的基本数据
        const {
          oss_bucket,
          oss_expired_time,
          oss_path,
          oss_region,
          oss_session_token,
          oss_start_time,
          oss_tmp_secret_id,
          oss_tmp_secret_key,
        } = data;

        // new 一个COS对象
        const cos = new COS({
          // 必选参数
          getAuthorization: (options: any, callback: any) => {
            callback({
              TmpSecretId: oss_tmp_secret_id,
              TmpSecretKey: oss_tmp_secret_key,
              XCosSecurityToken: oss_session_token,
              StartTime: oss_start_time, // 时间戳，单位秒，如：1580000000
              ExpiredTime: oss_expired_time, // 时间戳，单位秒，如：1580000900
              ProgressInterval: 0.001, // 设置onProgress回调此时，默认1000ms一次，但个人感觉没啥用，详细看官网地址
            });
          },
        });
        percentNum = randomNum(20, 50); // 50 ~ 70
        callbackPercent({ percent: percentNum });
        // 上传图片  其中Bucket 和 Region 接口返回，Bucke和Region是由公司负责人使用公司账户，登入腾讯云，获取回来的。
        //key 在前面加上路径写法可以生成文件夹
        cos.uploadFile(
          {
            Bucket: oss_bucket /* 必须 */,
            Region: oss_region /* 存储桶所在地域，必须字段 */,
            Key: oss_path + new Date().getTime() + file.name /* 必须  这个值要注意下，前面是要跟公司设置的oss路径要匹配的，不然上传可能会报403*/,
            StorageClass: "STANDARD",
            Body: file, // 上传文件对象
            SliceSize:
              1024 *
              1024 *
              3 /* 触发分块上传的阈值，超过3MB使用分块上传，非必须 */,
            onProgress: (progressData: any) => {
              // 上传进度回调，不过感觉不怎么样
              const { percent } = progressData;
              if (percent === 1) {
                percentNum = randomNum(4, 91); // 91 ~ 95
                callbackPercent({ percent: percentNum });
              } else {
                percentNum = randomNum(10, 80); // 80 ~ 90
                callbackPercent({ percent: percentNum });
              }
            },
          },
          (err: any, data: any) => {
            // 将上传后的封面进行路径拼接保存到本地
            if (data && data.statusCode === 200) {
              percentNum = randomNum(3, 96); // 96 ~ 99
              callbackPercent({ percent: percentNum });
              // 上传成功
              const url = "https://" + data.Location;
              setTimeout(() => {
                callbackPercent({ percent: 100 });
              }, 200);
              callback({
                code: 1,
                data: url,
              });
            } else {
              callbackPercent({ percent: 100 });
              // 上传失败，返回错误信息
              callback({
                code: 0,
                data: err,
              });
            }
          }
        );
      }
    })
    .catch((err: any) => {
      callbackPercent({ percent: 100 });
      // 上传失败，返回错误信息
      callback({
        code: 0,
        data: err,
      });
    });
};

export default uploadFile;

2. 页面调用

（1）引入ts

import uploadFile from "@/utils/uploadFileRequest";

（2）方法调用

uploadFile(
       file, // 上传文件
       (res: any) => {
        // 进度值回调函数，我公司上传有个进度显示，没有的话可以不用的
         const { percent } = res;
       },
       (res: any) => {
       // 上传结果回调
         const { code, data } = res;
         if (code === 0) {
           // 上传失败
           console.log('上传失败错误信息', data)
           this.$message.error("上传失败，请重新上传");
         }

         if (code === 1) {
           // 上传成功
           console.log('图片路径地址', data)
         }
       }
     );

3. 结尾
以上就是个人简单的封装了，详细文档，可以去官网阅读