腾讯云cos上传文件功能封装

前言：要使用cos要先去腾讯云创建cos储存桶，创建完储存桶按步骤来就可以了。

安装依赖

npm i cos-js-sdk-v5

创建文件upload.js

const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
// https://console.cloud.tencent.com/cam/capi
const cos = new COS({SecretId: 'xxxxx',SecretKey: 'xxxx',
})// 腾讯云COS上传文件方法 参数为file文件对象
export const uploadCOS = (file) => {return new Promise((resolve, reject) => {if (file) {// 执行上传操作cos.putObject({Bucket: 'git-1304113371' /* 存储桶 */,Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,Key: file.name /* 文件名 */,StorageClass: 'STANDARD', // 上传模式, 标准模式不用修改Body: file, // 上传文件对象onProgress: (progressData) => {// 上传进度console.log(JSON.stringify(progressData))},},(err, data) => {// 上传成功之后if (data.statusCode === 200) {resolve(`https://${data.Location}`)}if (err) reject(err)})}})
}

页面中使用

<script>
// 引入方法  我这里是在utils文件中创建的upload.js
import { uploadCOS } from '@/utils/upload'// 使用方法
uploadCOS(data.file).then((res) => {this.dialogImageUrl = res
})

腾讯云cos上传文件功能封装相关推荐

利用腾讯云进行上传文件
1.导入依赖 <dependency><groupId>com.qcloud</groupId><artifactI ...
腾讯云COS上传下载文件
1.初始化COSClient import com.qcloud.cos.COSClient; import com.qcloud.cos.ClientConfig; import com.qclou ...
腾讯云cos上传及获取
需求背景:在开发过程中遇到过需要用户上传文件及下载文件的需求,可文件上传到服务器又会对服务器造成越来越大的压力,这时就考虑把文件放到云上.(这里的云不是天上的云哈~~~) 前期准备:开通腾讯云账号并购 ...
tp6整合腾讯云cos上传
1.创建一个名为 composer.json的文件,内容如下: { "require": {"qcloud/cos-sdk-v5": ">=2. ...
SpringBoot整合阿里云OSS上传文件
一.需求分析文件上传是一个非常常见的功能,就是通过IO流将文件写到另外一个地方,这个地方可以是项目下的某个文件夹里,或者是本地电脑某个盘下面,还可以是云服务OSS里面,这里就是我要讲到的OSS,我写 ...
web利用腾讯云点播上传视频
web利用腾讯云点播上传视频到云服务器第一步导入 <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader. ...
云服务器上传文件软件,云服务器上传文件软件
云服务器上传文件软件内容精选换一换弹性云服务器支持通过内网访问OBS,OBS可供用户存储任意类型的数据.将图片.视频等数据存储至OBS后,在ECS上可以访问OBS,下载桶中的图片或视频等数据.通 ...
华为服务器上传文件,云服务器上传文件方式
云服务器上传文件方式内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据传 ...
阿里云OSS上传文件时,如何显示上传网速
阿里云OSS上传文件时,如何显示上传网速业务场景用户上传时,网速很慢,或者在上传大文件时,虽然有进度条,但是动的很慢,或者不明显,用户会产生困惑. 所以就产生了一个显示网速的需求点. 实现方式 E ...

腾讯云cos上传文件功能封装

安装依赖

创建文件upload.js

页面中使用

腾讯云cos上传文件功能封装相关推荐

最新文章

热门文章