腾讯云对象存储COS的使用教程，node获取签名，js上传

最新推荐文章于 2024-03-29 09:41:32 发布
置顶 最新推荐文章于 2024-03-29 09:41:32 发布
阅读量3.9k 收藏 7
点赞数 6
分类专栏： 腾讯云对象存储 服务端渲染 nuxt 文章标签： 腾讯云对象存储 cos-js-sdk-v5 qcloud-cos-sts nuxt 服务端渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40146880/article/details/102829629
版权

腾讯云对象存储的使用

这里忽略创建存储桶之类的操作。
说明：本示例使用nuxt服务端渲染 + koa框架

万事第一步：npm install ~~~
npm i qcloud-cos-sts --save

node sdk

注意：qcloud-cos-sts 只能在服务端中使用。
第二步：设置授权策略

// 示例 创建一个oss文件夹在controllers下面,项目结构自行更改。
// ../controllers/oss/index.js

let STS = require('qcloud-cos-sts'); 

import jwt from '../../../jwt.js'; // 封装的jwt方法
import { response as R } from '../../controllers/unifyResponse'; // 这里对数据封装了统一返回格式，后面会附上封装源码。
// ······

/**
 * 授权策略
 * @param {String} LongBucketName 桶名
 * @param {String} Region 桶区域
 */
let policy = function(LongBucketName, Region) {
  // let LongBucketName = 'public-***********';
  // let Region = 'ap-beijing';
  let ShortBucketName = LongBucketName.substr(0, LongBucketName.indexOf('-'));
  let AppId = LongBucketName.substr(LongBucketName.indexOf('-') + 1);
  return {
    version: '2.0' /* 策略语法版本，默认为2.0 */,
    statement: [
      {
        action: [
          // '*'
          // 所有 action 请看文档 https://cloud.tencent.com/document/product/436/31923
          // 简单上传
          'name/cos:PutObject',
          'name/cos:PostObject',
          // 分片上传
          'name/cos:InitiateMultipartUpload',
          'name/cos:ListMultipartUploads',
          'name/cos:ListParts',
          'name/cos:UploadPart',
          'name/cos:CompleteMultipartUpload',
          'name/cos:uploadFiles'
        ] /* 此处是指 COS API，根据需求指定一个或者一序列操作的组合或所有操作(*) */,
        effect: 'allow' /* 有 allow （允许）和 deny （显式拒绝）两种情况 */,
        principal: { qcs: ['*'] } /* 委托人 授权子账户权限 */,
        resource: ['qcs::cos:' + Region + ':uid/' + AppId + ':prefix//' + AppId + '/' + ShortBucketName + '/*'] /* 授权操作的具体数据，可以是任意资源、指定路径前缀的资源、指定绝对路径的资源或它们的组合 */
      }
    ]
  };
};

第三步：接下来获取临时签名

/**
 * 鉴权获取oss临时密钥接口
 * @param {*} ctx nuxt上下文对象
 * @param {*} next 执行下一步
 * @returns 返回临时密钥
 */
let getOssKey = (ctx, next) => {
  return new Promise(async (resolve, reject) => {
    try {
      // await jwt.verifyToken(ctx, next); /* 这里是对于用户访问进行鉴权，可以根据实际项目需求修改。 */
      STS.getCredential(
        {
          secretId: 'AKID3zjGZgCxCOQCk8IBxWwAC0ZigU4tpzBQ',
          secretKey: '2rRmsxlSxDGZdWSGtJrBqGYeaNxiSUIr',
          policy: policy(ctx.request.body.Bucket, ctx.request.body.Region),
          durationSeconds: 7200
        },
        async (err, credential) => {
          console.log(err || credential) // 这里拿到错误或者临时签名信息。
          /*  R.send()为封装的统一返回方法，请自行删减。 */
          return resolve((ctx.body = await R.send(200, err || credential)));
        }
      );
    } catch (error) {
      //   console.log('getOssKey:', error);
      return resolve((ctx.body = error));
    }
  });
};

export default {
  getOssKey /* 获取临时密钥 */
};

我这是暴露了一个接口供前端调用

// 多余说明：
const Router = require('koa-router');
const router = new Router({ prefix: '/koaApi/manage' }); // prefix 为router前缀，根据具体需求增删改～。
import oss from "../controllers/oss/index";
router.post('/getOssKey', oss.getOssKey);

ok 服务端这时候拿到临时COS的签名，下面则是客户端的骚操作了。

前端请求格式多余赘述:

  1. axios API 封装格式。（ 后面附上 server+client 统一axios请求拦截器 ）
export const getOssKey = async params => {
  return await global.axios.$post(`/manage/getOssKey`, params);
};
// 调用api使用 getOssKey({ Bucket: 'public-********', Region: 'ap-beijing' })
  1. 直接使用 axios 请求
axios.$post(`/manage/getOssKey`, { Bucket: 'public-********', Region: 'ap-beijing' });

客户端COS上传

第一步：下载cos-js-sdk-v5，很抱歉万年不变的定律npm install在这里行不通，使用 npm包下载的sdk运行貌似有问题，各种报错。( 或者你们可以尝试一下 😊)
我们通过gayhub下载～ 点击进入查看源码 👉cos-js-sdk-v5，将源码复制下载放在static或者plugins文件夹即可。

第二步：引入 plugins
从nuxt.config.js中配置plugins
注意：cos-js-sdk-v5 只能在客户端中使用。

// nuxt.config.js
plugins:[{ src: '~/static/cos-js-sdk.js', mode: 'client' }]

第三步：客户端COS上传jssdk模块封装

import { getOssKey } from '../../assets/utils/api.js';  // 封装的api接口
import { Toast } from 'vant'; // 这里使用了vant的loading，可自行增删。
import meth from './meth.js'; // 封装的公用methods模块，下面附上meth模块中使用到的方法。如果只需要测试上传demo 那么只需要拿取其中的random_string+randomSign方法即可。
// ...
// 进入正题
export default new (class {
  constructor() {}
  _cos(obj = { Bucket: 'public-********', Region: 'ap-beijing' }) {
    return new COS({
      getAuthorization: function(options, callback) {
        getOssKey({ Bucket: obj.Bucket, Region: obj.Region }).then(config => {
          callback({
            TmpSecretId: config.data.credentials.tmpSecretId,
            TmpSecretKey: config.data.credentials.tmpSecretKey,
            XCosSecurityToken: config.data.credentials.sessionToken,
            ExpiredTime: config.data.expiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization
            // ScopeLimit: true,  // 细粒度控制权限设为 true，会限制密钥只在相同请求时重复使用
            FileParallelLimit: 3, // 控制文件上传并发数
            ChunkParallelLimit: 8 // 控制单个文件下分片上传并发数，在同园区上传可以设置较大的并发数
            // ChunkSize: 1024 * 1024 * 8,  // 控制分片大小，单位 B，在同园区上传可以设置较大的分片大小
          });
        });
      }
    });
  }
  /**
   * 文件直传
   * @param {Object} obj Bucket、Region、Body 详情查看cos文档
   * @returns err || data
   */
  putObject(obj) {
    return new Promise((resolve, reject) => {
      this._cos(obj).putObject(
        {
          Bucket: obj.Bucket,
          Region: obj.Region,
          Key: `${meth.randomSign(3)}.${obj.Body[0].name.split('.')[1]}`,
          Body: obj.Body[0],
          onTaskReady: function(taskId) {
            /* 执行队列taskId */
            console.log('taskId:', taskId);
          },
          onProgress: info => {
            var percent = parseInt(info.percent * 10000) / 100;
            var speed = parseInt((info.speed / 1024 / 1024) * 100) / 100;
            console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
            this.loading('进度：' + percent + '%');
          }
        },
        (err, data) => {
          Toast.clear();
          return err ? Toast.fail('上传失败') && reject(err) : Toast.success('上传成功') && resolve(data);
        }
      );
    });
  }
  /**
   * 文件分块上传
   * @param {Object} obj Bucket、Region、Body 详情查看cos文档
   * @returns err || data
   */
  sliceUploadFile(obj) {
    return new Promise((resolve, reject) => {
      this._cos(obj).sliceUploadFile(
        {
          Bucket: obj.Bucket,
          Region: obj.Region,
          Key: `${meth.randomSign(3)}.${obj.Body[0].name.split('.')[1]}`,
          Body: obj.Body[0],
          onTaskReady: function(taskId) {
            /* 执行队列taskId */
            console.log('taskId:', taskId);
          },
          onProgress: progressData => {
            /* 非必须 */
            var percent = parseInt(progressData.percent * 10000) / 100;
            var speed = parseInt((progressData.speed / 1024 / 1024) * 100) / 100;
            console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
            this.loading('进度：' + parseInt(percent) + '%');
          }
        },
        (err, data) => {
          Toast.clear();
          return err ? Toast.fail('上传失败') && reject(err) : Toast.success('上传成功') && resolve(data);
        }
      );
    });
  }
  /**
   * 批量上传
   * @param {Object} obj Bucket、Region、Body 详情查看cos文档
   * @returns err || 批量上传filesData
   */
  MultiFiles(obj) {
    return new Promise(async (resolve, reject) => {
      let files = await [...obj.Body].map(file => ({ Bucket: obj.Bucket, Region: obj.Region, Key: `${meth.randomSign(3)}.${file.name.split('.')[1]}`, Body: file }));
      await this._cos({ Bucket: obj.Bucket, Region: obj.Region }).uploadFiles(
        {
          files: files,
          SliceSize: 1024 * 1024,
          onTaskReady: function(taskId) {
            /* 执行队列taskId */
            // console.log("taskId:",taskId);
          },
          onProgress: info => {
            var percent = parseInt(info.percent * 10000) / 100;
            var speed = parseInt((info.speed / 1024 / 1024) * 100) / 100;
            console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
            this.loading('进度：' + percent + '%');
          },
          onFileFinish: (err, data, options) => {
            console.log(options.Key + '上传' + (err ? '失败' : '完成'));
          }
        },
        (err, data) => {
          Toast.clear();
          return err ? Toast.fail('上传失败') && reject(err) : Toast.success('上传成功') && resolve(data);
        }
      );
    });
  }
  loading(text) {
    try {
      Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: text
      });
    } catch (error) {
      console.log(error);
    }
  }
})();

client 客户端COS API调用

putObject 文件直传

await tools.putObject({
    Bucket: 'public-********', /* 必须 */
    Region: 'ap-beijing',    /* 必须 */
    Body: e.target.files
})

sliceUploadFile 分块上传

await tools.sliceUploadFile({
    Bucket: 'public-********', /* 必须 */
    Region: 'ap-beijing',    /* 必须 */
    Body: e.target.files
})

MultiFiles 批量上传 需要设置 input 为 multiple

await tools.MultiFiles({
    Bucket: 'public-********', /* 必须 */
    Region: 'ap-beijing',    /* 必须 */
    Body: e.target.files
})

这里便可以实现客户端使用cos-js-sdk进行上传文件了
示例图：
在这里插入图片描述
在这里插入图片描述

下面附上公用方法

meth.js
说明：上传的Key使用了meth中的随机字符串方法randomSign

 export default new (class {
  constructor() {}
  /**
   * 设置cookie
   * @param {String} name cookie的名称
   * @param {String} value cookie的值
   * @param {Number} expiredays cookie的过期时间
   */
  setCookie(name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = name + '=' + encodeURI(value) + (expiredays == null ? '' : ';expires=' + exdate.toGMTString());
  }
  /**
   * 获取cookie
   * @param {String} name cookie的名称
   */
  getCookie(name) {
    var arr,
      reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
    if ((arr = document.cookie.match(reg))) {
      return arr[2];
    } else {
      return null;
    }
  }
  /**
   * 删除cookie
   * @param {String} name cookie的名称
   */
  delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = this.getCookie(name);
    if (cval != null) {
      document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString();
    }
  }
  /**
   * 表单上传转formdata编码
   * @param {Object} data
   * @returns formdata
   */
  fromData(data) {
    if (process.client) {
      let formData = new FormData();
      Object.entries(data).map(([k, v]) => {
        formData.append(k, v);
      });
      return formData;
    }
  }
  /**
   * 生成随机数
   * @param {Num} len 需要生成的随机数长度
   */
  random_string(len) {
    //获取随机名
    len = len || 32;
    let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz';
    let maxPos = chars.length;
    let pwd = '';
    for (let i = 0; i < len; i++) {
      pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
  }
  /**
   * 生成随机req_msg_id === 随机数+时间戳
   * @param {Num} len 需要生成的随机数长度
   */
  randomSign(len) {
    return `${this.random_string(len)}-${parseInt(Math.floor(Math.random() * Date.now()) / 1000)}`;
  }
  //建立一个可存取到该file的url
  getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
      // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
      // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
})();

jwt封装方法

jwt.js

/*
 * @Author: yaodongyi
 * @Date: 2019-09-29 16:01:09
 * @Description:jsonwebtoken
 */
// jwt生成token
const jwt = require('jsonwebtoken');
import { response as R } from './db/controllers/unifyResponse'; // 封装的统一响应状态结果

const serect = 'serect';
/**
 * 生成token
 * @param {Object} userinfo 用户信息
 * @returns token
 */
let addToken = async userinfo => {
  //创建token并导出
  const token = jwt.sign(
    {
      name: userinfo.name,
      id: userinfo.id
    },
    serect,
    { expiresIn: '7d' }
  );
  return token;
};

/**
 * 验证token是否过期
 * @param {String} tokens
 * @returns false未过期，true过期
 */
let verifyToken = (ctx, next) => {
  return new Promise((resolve, rejects) => {
    let token = ctx.request.header.token || ctx.request.header.cookie;
    if (!token) {
      return rejects(R.send(0, {}, '暂未登录，请先进行登录'));
    }
    try {
      resolve(Object.assign(200, jwt.verify(token, serect)));
    } catch (err) {
      return rejects(R.send(0, err, '登录失效，请重新登录'));
    }
  });
};

/**
 * 解密token
 * @param {Object} tokens
 * @returns 解密后信息
 */
let decodeToken = tokens => {
  if (tokens) {
    let decoded = jwt.decode(tokens, serect);
    return decoded;
  }
};

/**
 * @description demo
 * @example
 * try {
 *   console.log(jwt.verifyToken(jwt.addToken({ name: 'ydy', id: 1 })));
 * } catch (error) {
 *   console.log(error);
 * }
 */

module.exports = { addToken: addToken, decodeToken: decodeToken, verifyToken: verifyToken };

统一返回数据格式封装

unifyResponse.js

/*
 * @Author: yaodongyi
 * @Date: 2019-09-30 14:46:07
 * @Description:
 */
export const response = new (class {
  constructor() {
    /**
     * 返回结构体
     */
    this.response = {
      result: {
        code: new Number(), // 200:success, 0:error, default 0:Invalid
        msg: new String() // description
      },
      data: new Object() // 响应body体
    };
  }
  /**
   * 设置统一返回结构
   * @param {*} code 返回状态码
   * @param {*} data 返回的数据源
   * @param {*} description 返回的msg
   * @returns {Object} { result: { code: Number, msg: String }, data: Object }
   */
  send(code, data, description) {
    switch (code) {
      case 200:
        return Object.assign({}, this.response, {
          data: data,
          result: {
            code: 200,
            msg: description || 'Success'
          }
        });
      case 0:
        return Object.assign({}, this.response, {
          result: {
            code: 0,
            msg: description || 'Error'
          }
        });
      default:
        return Object.assign({}, this.response, {
          result: {
            code: 0,
            msg: description || 'Invalid'
          }
        });
    }
  }
})();

封装统一axios请求拦截器

plugins/http.js

/*
 * @Author: yaodongyi
 * @Date: 2019-07-26 16:12:05
 * @Description:axios请求相应拦截器
 */
// import qs from 'qs';
// import { Notification } from 'element-ui';
// import { res_decode } from '../assets/utils/encode';
// import meth from '../assets/utils/meth';
// 如果后端服务器地址和前端服务器域名不同 or 生产环境/开发环境 域名不同，则对应设置域名。
// const baseURL = process.env.NODE_ENV === 'development' ? '/koaApi' : 'http://www.baidu.com';

let getCookie = (cookie = '', name) => (cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)')) ? cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'))[2] : null);

export default function(ctx, inject) {
  // ctx.$axios.defaults.timeout = 6000;
  ctx.$axios.interceptors.request.use(request => {
    // console.log(request.headers.common);
    request.headers = Object.assign(
      {
        // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        'Content-Type': request.headers.ContentType ? request.headers.ContentType : 'application/json; charset=UTF-8', //json
        Accept: 'application/json'
      },
      { ...(process.server && { Authorization: getCookie(request.headers.common.cookie, 'token') || '' }), ...(process.client && { token: sessionStorage.getItem('token') || '' }) }
    );

    if (process.client) {
      request.baseURL = '/koaApi';
      console.log(`%c 发送 ${request.baseURL}${request.url} `, 'background:#00CC6E;color:#ffffff', request);
    }
    return request;
  });

  ctx.$axios.onRequestError(config => {
    console.error('请求错误' + config);
  });

  ctx.$axios.interceptors.response.use(
    response => {
      // console.log(process.server, 'response.data', response);
      // response.data.data.encodeType && res_decode(response); // 这里是rsa解密，根据具体需求进行增删。
      if (process.server) return Promise.resolve(response);
      if (response.status === 200) {
        if (response.data.result.code === 200) {
          console.log(`%c 接收 ${response.config.url} `, 'background:#1E1E1E;color:#bada55', response);
        } else {
          // Notification({
          //   message: response.data.result.msg,
          //   type: 'warning'
          // });
          console.error(`接收 ${response.config.url} `, response);
        }
      } else {
        console.error(`接收 ${response.config.url} `, response);
      }
      return Promise.resolve(response);
    },
    error => {
      return Promise.reject(error);
    }
  );

  ctx.$axios.onError(config => {
    console.error('错误' + config);
  });

  /* 坑点，注入全局做法。 */
  global = Object.assign(global, { axios: ctx.$axios });
}

nuxt.config.js中引入plugins

plugins:['~/plugins/http']

封装统一管理 API 接口

export const getOssKey = async params => {
  return await global.axios.$post(`/manage/getOssKey`, params);
};

使用：

getOssKey({ Bucket: obj.Bucket, Region: obj.Region }).then(res=>{
	// ... 
}).catch(err=>{
	// ...
})
// or
async func(){
	await getOssKey({ Bucket: obj.Bucket, Region: obj.Region })
}
姚某某。
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
node.js上传图片到腾讯云COS上
07-24
优化网站的性能对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。COS 提供网页端管理界面、多种主流开发语言的 SDK、API 以及命令行和图形化工具，并且兼容 S3 的 API 接口，方便用户直接使用社区工具和插件。
使用node上传到腾讯云对象存储cos---转载
weixin_48802343的博客
12-23 650
虽然是2017年发布的，但今天依然很好用感谢作者 原作者地址 遇到的小坑： MulterError: Unexpected field at wrappedFileFilter (C:\Users\Administrator\Desktop\node服务\node_modules\multer\index.js:40:19) at Busboy.<anonymous> (C:\Users\Administrator\Desktop\node服务\node_modules\mult
探索腾讯云COS STS SDK：安全便捷的数据存储与访问
最新发布
gitblog_00068的博客
03-29 290
探索腾讯云COS STS SDK：安全便捷的数据存储与访问 项目地址:https://gitcode.com/tencentyun/qcloud-cos-sts-sdk 项目简介 腾讯云COS STS SDK 是一个专为开发者设计的工具包，它允许应用程序临时获取并使用腾讯云对象存储（Cloud Object Storage, COS）的权限，以实现安全、灵活的数据存取操作。这个SDK支持多种编程语...
Node.js 根据SHA1算法生成签名
NayelyA的博客
10-15 1553
const crypto = require('crypto'); const util = module.exports = {} util.GenSha1 = function(secretKey, strsign){ let signMethodMap = {'HashSHA1': "sha1"}; let hmac = crypto.createHash(signMethodMap['HashSHA1'], secretKey || ""); return hmac.upd
基于node.js和oss的后端签名直传
weixin_33913377的博客
02-27 631
原文：github.com/sikichan/os… 单个图片上传页面，上传后显示图片预览 阿里云OSS服务端签名后直传 我们都知道，采用JS客户端直接签名，OSSAccessId和AccessKeySecret暴露在前端页面，可以被轻易获取，存在严重安全隐患。 这里提供了一种使用阿里云OSS服务器端签名后直传，避免这种危险的方法。由于阿里云OSS开发文档只提供了Java，PHP，Python和...
Node.js腾讯云COS文件上传
小猿猪哥的博客
08-25 9604
昨天写了一篇《Node.js阿里云OSS文件上传》。今天上班来了想起，原来我还有腾讯云的产品，于是见看了下腾讯的对象存储-COS。使用步骤进入控制台腾讯云的页面，发现就没有控制台这三个字，那么怎么进去了？只能点击云产品，选择对应的产品进去了。获取APPID获取SecretId和SecretKey 这里大家根据自己上一步获取的APP的开头数组点击进入。我的是125开头的。 这里不要选错了。选错
易语言-腾讯云对象存储COS调用API的简单例子
06-26
腾讯云对象存储COS调用API的简单例子
腾讯云cos对象存储C#版本上传
05-04
腾讯云 COS 最新v5版本sdk暂时没C#版本。自己琢磨了一个，能用可供参考。js直传也可以用里面方法获取签名 ，代码里ToUnixTime自己网少找下处理方法，代码就不放了
PHP生成腾讯云COS接口需要的请求签名
01-21
COS 是腾讯云对象存储的缩写及简称，请求签名是第三方在调用COS相关接口时需要按需提供的、经过特定算法创建而成的一组字符串信息，将唯一的标识当前第三方身份，提供通信双方的身份识别，只有有效的签名COS才会提供...
腾讯云点播Vod与对象存储Cos
12-03
腾讯云点播Vod与对象存储Cos云对象存储即COS，是提供简单，可拓展，便于获取和分享数据的云端存储服务。 可以用来存储各类网络资源，例如图片，文档，视频，音频，静态网页，备份，日志等等
微信小程序-腾讯云 COS 微信小程序 SDK
08-05
cos-wx-sdk-v4 微信小程序 sdk for 腾讯云对象存储服务 前期准备 请您到 https://console.qcloud.com/cos 获取您的项目 ID(appid)，bucket，secret_id 和 secret_key。 请您到 https://console.qcloud.com/cos 针对您要操作的 bucket 进行跨域（CORS）设置，可以按照如下范例，修改来源 Origin： 配置 Step1. 下载源码 从 github 下载源码，将 SDK 中 dist 目录下的 cos-wx-sdk-v4.js 包含到您的项目中。 Step.2 加载文件 把 cos-wx-sdk-v4.js 放在小程序 app/lib/ 目录下，在您的页面 js 里引入： require('../../lib/cos-wx-sdk-v4'); 使用 cos-wx-sdk-v4 与 cos-js-sdk-v4 的不同点 小程序文件上传过程中，js 没权限读取文件内容，所以 wx-sdk 相比 js-sdk 少了分片上传的所有逻辑。 由于文件不分片上传只支持
js纯前端实现腾讯cos文件上传功能的示例代码
10-17
主要介绍了vue纯前端实现腾讯cos文件上传功能的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端使用js控制腾讯云cos存储对象，优化静态文件存储读取的功能，获取预签名，上传下载，腾讯云大文件分块上传失败，报错跨域失败
qq_43305958的博客
09-02 2685
前端使用js控制腾讯云存储对象，优化静态文件存储读取的功能，报错跨域失败一、对象存储是什么？二、使用步骤1.引入库2.引入作为模块3.前端使用固定密钥计算签名，该格式适用于前端调试4.下载对象5.上传对象6.调用cos上传下载跨域总结 一、对象存储是什么？ 对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据
vue 使用cos-js-sdk-v5 进行文件其它方式的上传操作
qq_46620208的博客
09-16 998
vue 使用cos-js-sdk-v5 进行文件其它方式的上传操作。
腾讯云使用步骤
smouns_的博客
11-23 1225
腾讯云上传使用 1：安装插件 cos-js-sdk-v5 yarn add cos-js-sdk-v5 (npmruncos-js-sdk-v5) 2:导入 import Cos from 'cos-js-sdk-v5' 3:实例化 let cos = new Cos({ SecretId: 'COS_SECRETID', // 身份识别 ID SecretKey: 'COS_SECRETKEY', // 身份密钥 ...
腾讯云极简配置
q2669777844的博客
11-22 730
腾讯云配置
使用cos-js-sdk-v5腾讯云实现cos文件上传
weixin_44846945的博客
10-15 2615
使用cos-js-sdk-v5腾讯云实现cos文件上传
腾讯云对象存储 cos-js-sdk-v4 踩坑记
WiFi_Uncle的专栏
10-25 7309
腾讯云对象存储 cos-js-sdk-v4 踩坑记https://cloud.tencent.com/document/product/436/80951. cos.uploadFile(）上传文件传bucket无效功能: 不同的上传，将传到不同的bucket中，(公有读私有写和私有读写)
腾讯云对象存储 COS
05-20
腾讯云对象存储 COS（Cloud Object Storage）是一种高度可扩展的云存储服务，用于存储和访问任何类型的数据，包括文本、图像、音频和视频等。COS 提供了高可用性、高耐用性和高性能的存储桶，可满足各种应用程序的需求。 COS 提供了多种 API 和 SDK，可用于上传、下载、管理和访问存储在 COS 中的对象。此外，COS 还提供了丰富的安全功能，如访问控制、加密和日志记录，以确保数据的保护和隐私。 COS 可以与其他腾讯云服务集成，如 CDN、CVM、云函数等，以实现更强大的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值