使用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~10callbackPercent({ percent: percentNum });// 这里走接口，是走我自己公司的接口获取公司的oss配置信息（也就是密钥相关信息），后面要用到，如果公司直接给你，就不需要走接口的axios.post(url, {参数}).then((res: any) => {const { data } = res.data;percentNum = randomNum(20, 20); // 20 ~ 40callbackPercent({ 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, // 时间戳，单位秒，如：1580000000ExpiredTime: oss_expired_time, // 时间戳，单位秒，如：1580000900ProgressInterval: 0.001, // 设置onProgress回调此时，默认1000ms一次，但个人感觉没啥用，详细看官网地址});},});percentNum = randomNum(20, 50); // 50 ~ 70callbackPercent({ 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 ~ 95callbackPercent({ percent: percentNum });} else {percentNum = randomNum(10, 80); // 80 ~ 90callbackPercent({ percent: percentNum });}},},(err: any, data: any) => {// 将上传后的封面进行路径拼接保存到本地if (data && data.statusCode === 200) {percentNum = randomNum(3, 96); // 96 ~ 99callbackPercent({ 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. 结尾
以上就是个人简单的封装了，详细文档，可以去官网阅读

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

腾讯云视频点播视频上传接口
申请腾讯云获取id 及 key [腾讯云视频]Web上传地址 https://cloud.tencent.com/document/product/266/9239 Java 签名示例 ht ...
基于华为云obs实现文件上传下载（技术栈mysql+springboot+Maven+jsp+java）的技术分享
基于华为云obs实现文件上传下载(技术栈mysql+springboot+jsp+java)的技术分享 obs实现文件上传下载前言一.OBS是什么? 二.使用步骤 1.1 前期准备 2 工具的内容 ...
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不 ...
Nginx的安装基础配置（windows、linux）以及搭建图片服务器（windows、阿里云），文件上传
Nginx的安装基础配置(windows.linux)以及搭建图片服务器(windows.阿里云),文件上传本文目录文章目录 Nginx的安装基础配置(windows.linux)以及搭建图片服务 ...
使用阿里云OSS实现文件上传
概述场景文件上传,是程序开发中必须会使用到的一个功能,比如: 添加商品,用户头像,文章封面等需求富文本编辑(插件文件上传) 文件上传的原理是什么? 我们为什么要实现文件上传,其实就要共享资源,大家 ...
上传excel腾讯云服务器,使用SpringBoot上传文件到腾讯云
最近在做一个项目,涉及到腾讯云上传文件/图片到服务器,为了图方便并且提升访问速度,想着上传到腾讯云存储桶是一个不错的选择.腾讯云存储桶的创建可见我之前的文章. 当然存储桶里面不仅可以存图片,也可以存储 ...
阿里云 oss多文件上传
平时在做 oss 上传时,通过都是单个文件上传,但是前几天工作时涉及到多个文件的上传,在所有文件都上传完成后才能再做后续的代码执行.于是在原有的oss上传基础上添加for循环去挨个上传. 介绍一下,o ...
基于阿里云的OSS文件上传和下载
OSS概述 OSS是基于阿里云的一个云平台文件保存的系统,我们可以将服务器的文件上传至云端从而减轻服务器的压力. 初体验首先创建一个bucket (给你的云储存器配置名字等基本信息) 生成Asses ...
uniCloud - 云存储及文件上传
云存储云存储的上传方式有3种: 1. web界面即在uniCloud控制台 web控制台,点击云存储,通过web界面进行文件上传.该管理界面同时提供了资源浏览.删除等操作界面. 2. 客户端A ...
Node.js 博客实例（三）添加文件上传功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库使用 For ...

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

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

最新文章

热门文章