上传文件到腾讯云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应用如何防止恶意文件上传》恶意文件上传可能导致服务器被入侵,数据泄露甚至服务瘫痪,因此我们必须采取全面且有效的防范措施来保护Java应用的安全,下面我们就来看看具体的实现方法吧... 目录恶意文件上传的潜在风险常见的恶意文件上传手段防范恶意文件上传的关键策略严格验证文件类型检查文件内容控制文件存储

Java实现MinIO文件上传的加解密操作

《Java实现MinIO文件上传的加解密操作》在云存储场景中,数据安全是核心需求之一,MinIO作为高性能对象存储服务,支持通过客户端加密(CSE)在数据上传前完成加密,下面我们来看看如何通过Java... 目录一、背景与需求二、技术选型与原理1. 加密方案对比2. 核心算法选择三、完整代码实现1. 加密上

在React聊天应用中实现图片上传功能

《在React聊天应用中实现图片上传功能》在现代聊天应用中,除了文字和表情,图片分享也是一个重要的功能,本文将详细介绍如何在基于React的聊天应用中实现图片上传和预览功能,感兴趣的小伙伴跟着小编一起... 目录技术栈实现步骤1. 消息组件改造2. 图片预览组件3. 聊天输入组件改造功能特点使用说明注意事项

springboot上传zip包并解压至服务器nginx目录方式

《springboot上传zip包并解压至服务器nginx目录方式》:本文主要介绍springboot上传zip包并解压至服务器nginx目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录springboot上传zip包并解压至服务器nginx目录1.首先需要引入zip相关jar包2.然

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

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