腾讯云COS文件上传

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

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

1) script引入

<!--src为本地路径 根据自己项目目录结构来调整-->
<script src="../dist/cos-js-sdk-v5.min.js"></script>

官方提供了sdk下载地址：

地址1：cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js at master · tencentyun/cos-js-sdk-v5 · GitHub

地址2：https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js

2) webpack引入（安装依赖）

安装依赖

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

引入

const COS = require('cos-js-sdk-v5');
// 或
import COS from 'cos-js-sdk-v5';

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-js-sdk-v5");
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) => {
  // cos上传参数
  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}`, 
      /* Key: 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段。也就是上传后的文件在桶中的位置
      如果想要放在text文件下，可以定义为text/文件名。文件地址可以前端自己定义，也可以后端返回。 */
      Body: file, // 上传文件对象
    }
  );
};

4. 上传文件

1) 图片上传

<template>
    <div>
        <img :src="imgUrl" >
        <input type="file" ref="file" @change="onFile" />
        <button @click="selectFile">点击上传</button>
    </div>
</template>
​
<script>
    // 引入COS上传
    import { uploadFileOrPic } from '@/utils/fileUtils_cos'
    export default {
        data() {
            return {
                imgUrl: null,
            }
        },
        methods: {
            // 选择文件
            selectFile: function () {
                this.$refs.file.click()
            },
            // 选中文件
            onFile: async function (event) {
                if (event.target.files.length < 1) {
                    return
                }
                // 获取图片
                let file = event.target.files[0]
                // 调用接口获取文件上传信息
                const res = await this.$request(cosKey, "post");
                // 文件上传
                let _this = this
                uploadFileOrPic(file, file.name, res).then(url => {
                    _this.imgUrl = url
                })
            },
        }
    }
</script>

2) 富文本上传

<template>
    <div>
        <!-- 富文本编辑器 -->
        <Editor v-model="content" placeholder="请输入" @blur="() => {$refs.content.onFieldBlur()}"/>
        <button @click="onSubmit">上传</button>
    </div>
</template>
​
<script>
    // 引入COS上传
    import { uploadFileOrPic } from '@/utils/fileUtils_cos'
    export default {
        data() {
            return {
                content: null,
                url: null,
            }
        },
        methods: {
            async onSubmit() {
                var richText = this.content; // 富文本内容
                // 创建一个新的Blob对象
                var blob = new Blob([richText], {type: "html"});
                // 创建一个下载链接
                var url = URL.createObjectURL(blob);
                // 创建一个<a>标签并设置下载链接
                var link = document.createElement("a");
                link.href = url;
                link.download = "rich_text"; // 设置下载文件名
                let timestamp = new Date().getTime().toString()
                let random = Math.floor(100000 + Math.random() * 900000).toString()
                let path = `${timestamp}${timestamp}rich_text.html`;    // 时间戳 + 6位随机数组成文件名
​
                // 获取COS的key
                const res = await this.$request(cosKey, "post");
                if (res.errcode != '0000') return
                // 调用COS图片上传方法 
                let _this = this
                uploadFileOrPic(blob, path, res).then(url => {
                  _this.url = url   // 这里上传上去的是一个网页下载链接
                })
            }
        }
    }
</script>