vue 上传图片到腾讯云对象存储
需求:上传图片到腾讯云对象存储,返回图片链接地址。
大概流程:
腾讯云对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据。
COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。
COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入,实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。
官网文档:https://cloud.tencent.com/document/product/436
使用腾讯云对象存储准备工作:
首先是需要开通腾讯云对象存储服务,然后,登录对象存储控制台,创建存储视频对应的存储桶。配置规则,桶的读写权限,允许的域名等等的,都要进行设置,具体官方文档都有说明,这里就不赘述了。
准备工作结束后,接下来,就是正式使用了:
1、 引入cos-js-sdk-v5
安装 JavaScript SDK
:
npm install cos-js-sdk-v5
安装成功后会有如下信息:
2、封装upload.js
新建文件upload.js
,封装上传文件方法,判断上传文件为视频还是图片,视频上传到视频对应的桶,图片上传到图片对应的桶,视频如果大于50M,则分片上传。
步骤:
1)getCOSSecretKey
方法调用获取临时秘钥data;
由于固定密钥放在前端会有安全风险,所以使用临时密钥的方式:前端首先请求服务端,服务端使用固定密钥调用 STS 服务申请临时密钥,然后返回临时密钥到前端使用。
2)初始化;
3)判断上传文件的类型;
4)判断文件大小 是否需要分片上传。
// https://cloud.tencent.com/document/product/436/11459
import COS from 'cos-js-sdk-v5'
import {
Message } from 'element-ui'
import {
getCOSSecretKey } from '@/api/common/index'
const config = {
videoBucket: 'xxx',
imageBucket: 'xxx',
Region: 'ap-beijing'
}
// 上传到腾讯云cos
export function uploadObject (file, callback) {
/* 1.获取临时秘钥data
2.初始化
3.判断上传文件的类型
4.判断文件大小 是否需要分片上传*/
const type = file.type.substring(0, 5)
let fileName = file.name || ""
const origin_file_name = fileName.split(".").slice(0, fileName.split(".").length - 1).join('.') // 获取文件名称
// console.log('origin_file_name', origin_file_name)
// 获取当前时间戳 与文件类型拼接 为cos.putObject里的参数Key
const upload_file_name = new Date().getTime() + '.' + fileName.split(".")[fileName.split(".").length - 1] // 文件上传名称定义为当前时间戳
// console.log('upload_file_name', upload_file_name)
// 获取密钥
getCOSSecretKey({
bucket: type === 'video' ? config.videoBucket : config.imageBucket })
.then(response => {
// 后台接口返回 密钥相关信息
const data = response.result
var credentials = data && data.credentials
if (!data || !credentials) return console.error('credentials invalid')
// 初始化
var cos = new COS({
getAuthorization: (options, callback) => {
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
XCosSecurityToken: credentials.sessionToken,
StartTime: data.startTime,
ExpiredTime: data.expiredTime,
expiration: data.expiration,
requestId: data.requestId,
})
},
})
// 获取上传文件大小
let size = file.size
let key = '/art/' + upload_file_name
if (type === 'video') {
// console.log(size / (1024 * 2024))
if (size / (1024 * 1024) < 50) {
console.log('视频普通上传')
cos.putObject(
{
Bucket: config.videoBucket, // 存储桶名称
Region: config.Region, // 存储桶所在地域,必须字段
Key: key, // 视频名称
StorageClass: 'STANDARD',
Body: file, // 上传文件对象
onHashProgress: (progressData) => {
// console.log('校验中', JSON.stringify(progressData))
},
onProgress: (progressData) => {
const percent = parseInt(progressData.percent * 10000) / 100;
const speed = parseInt((progressData.speed / 1024 / 1024) * 100) / 100;
console.log('进度:' + percent + '%; 速度:' + speed + 'Mb/s;');
},
},
(err, data) => {
console.log('data', data)
if (err) {
console.log('err', err)
Message({
message: '视频文件上传失败,请重新上传', type: 'error' })
} else {
let fileUrl = 'https://' + config.videoBucket + '.file.myqcloud.com' + key
callback(fileUrl, origin_file_name) // 返回视频链接地址和视频的原始名称
}
}
)
} else {
console.log('视频分块上传')
// 上传分块
cos.sliceUploadFile(
{
Bucket: config.videoBucket, // 存储桶名称
Region: config.Region, // 存储桶所在地域,必须字段
Key: key /* 必须 */,
Body: file,
onTaskReady: (taskId) => {
/* 非必须 */
// console.log(taskId)
},
onHashProgress: (progressData) => {
/* 非必须 */
// console.log(JSON.stringify(progressData))
},
onProgress: function