上传文件到腾讯云COS

2024-05-02 21:48
文章标签 上传 腾讯 cos

本文主要是介绍上传文件到腾讯云COS,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

import COS from 'cos-js-sdk-v5' // 通过npm安装
import md5 from 'blueimp-md5' // 通过npm安装
class Auth { // 认证信息constructor (bucket, region, TmpSecretId, TmpSecretKey, XCosSecurityToken, ExpiredTime) {this.bucket = bucketthis.region = regionthis.TmpSecretId = TmpSecretIdthis.TmpSecretKey = TmpSecretKeythis.XCosSecurityToken = XCosSecurityTokenthis.ExpiredTime = ExpiredTime}
}function formatFileName (fileName, dirName) { // 文件命名规则:业务名+ '/' + md5(文件名+时间戳).文件扩展名let dotIndex = fileName.lastIndexOf('.')let baseName = fileName.substring(0, dotIndex) // 获取文件基础名let extensionName = fileName.substring(dotIndex + 1) // 获取文件扩展名let timestamp = new Date().getTime() // 获取当前时间戳,以毫秒为单位let result = dirName + '/' + md5(baseName + timestamp) + '.' + extensionNamereturn result
}export default class QCloudCos {constructor (getAuthPromise) { //传入用于获取认证信息的promise,由本模块在需要的时候自动获取this.getAuthPromise = getAuthPromisethis.getAuth().then(() => {this.cos = new COS({getAuthorization: (options, callback) => {let obj = {TmpSecretId: this.auth.TmpSecretId,TmpSecretKey: this.auth.TmpSecretKey,XCosSecurityToken: this.auth.XCosSecurityToken,ExpiredTime: this.auth.ExpiredTime}callback(obj)}})})}getAuth () {return this.getAuthPromise().then((res) => {this.auth = new Auth(res.bucket, res.region, res.TmpSecretId, res.TmpSecretKey, res.XCosSecurityToken, res.ExpiredTime)let interval = setInterval(() => { // 倒计时,token失效则重新获取this.auth.ExpiredTime -= 1if (this.auth.ExpiredTime <= 0) {clearInterval(interval)this.getAuth()}}, 1000)})}uploadFiles (files, dirName, callback) {let array = []for (let i = 0; i < files.length; i++) {array.push({Bucket: this.auth.bucket,Region: this.auth.region,Key: formatFileName(files[i].name, dirName),Body: files[i]})}this.cos.uploadFiles({files: array,SliceSize: 1024 * 1024, // 小于等于该数值会使用 putObject 上传,大于该数值会使用 sliceUploadFile 上传onProgress: function (info) {let percent = parseInt(info.percent * 10000) / 100let speed = parseInt(info.speed / 1024 / 1024 * 100) / 100console.log('进度:' + percent + '%; 速度:' + speed + 'Mb/s;')},onFileFinish: function (err, data, options) {console.log(options.Key + '上传' + (err ? '失败' : '完成'))}}, function (err, data) {callback(err || data)})}
}

使用步骤示例:

1.初始化:

this.qCloudCos = new QCloudCos(getCosToken) // 传入一个返回Auth对象的promise

2.上传图片:

this.qCloudCos.uploadFiles(this.pics, 'feedback', (data) => { // 传入3个参数:file数组,业务名(作为文件目录名),上传结果回调。if (!data.files) {return}let result = []for (let i = 0; i < data.files.length; i++) {let item = data.files[i]if (!item.data) { // 图片上传失败return}result.push('https://' + item.data.Location) // 上传到CDN之后的文件URL}
})

这篇关于上传文件到腾讯云COS的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/955199

相关文章

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Java文件上传的多种实现方式

《Java文件上传的多种实现方式》文章主要介绍了文件上传接收接口的使用方法,包括获取文件信息、创建文件夹、保存文件到本地的两种方法,以及如何使用Postman进行接口调用... 目录Java文件上传的多方式1.文件上传接收文件接口2.接口主要内容部分3.postman接口调用总结Java文件上传的多方式1

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分(获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并)、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

AIGC6: 走进腾讯数字盛会

图中是一个程序员,去参加一个技术盛会。AI大潮下,五颜六色,各种不确定。 背景 AI对各行各业的冲击越来越大,身处职场的我也能清晰的感受到。 我所在的行业为全球客服外包行业。 业务模式为: 为国际跨境公司提供不同地区不同语言的客服外包解决方案,除了人力,还有软件系统。 软件系统主要是提供了客服跟客人的渠道沟通和工单管理,内部管理跟甲方的合同对接,绩效评估,BI数据透视。 客服跟客人

在SSH的基础上使用jquery.uploadify.js上传文件

在SSH框架的基础上,使用jquery.uploadify.js实现文件的上传,之前搞了好几天,都上传不了, 在Action那边File接收到的总是为null, 为了这个还上网搜了好多相关的信息,但都不行,最后还是搜到一篇文章帮助到我了,希望能帮助到为之困扰的人。 jsp页面的关键代码: <link rel="stylesheet" type="text/css" href="${page

【CTF Web】BUUCTF Upload-Labs-Linux Pass-13 Writeup(文件上传+PHP+文件包含漏洞+PNG图片马)

Upload-Labs-Linux 1 点击部署靶机。 简介 upload-labs是一个使用php语言编写的,专门收集渗透测试和CTF中遇到的各种上传漏洞的靶场。旨在帮助大家对上传漏洞有一个全面的了解。目前一共20关,每一关都包含着不同上传方式。 注意 1.每一关没有固定的通关方法,大家不要自限思维! 2.本项目提供的writeup只是起一个参考作用,希望大家可以分享出自己的通关思路