腾讯云cos使用介绍

腾讯云cos申请配置

目标

使用现成的腾讯云服务创建一个免费的云存储。

官网：https://cloud.tencent.com/

创建账号并实名认证

在腾讯云中创建帐号并实名认证

开通对象存储

创建存储桶

设置cors规则

在存储桶列表中，选中存储桶

在左侧的菜单中选安全管理

因为我们是在测试上传，全部容许上传即可，真正的生产环境需要单独配置具体的域名和操作方法

配置云API秘钥

服务器属于个人的，需要一定的权限才能自由上传图片，这个负责权限验证的其实就是秘钥，也就是说拥有秘钥是进行上传的必要条件。

秘钥配置

API密钥管理

安全性提示

实际工作中，秘钥属于敏感信息，不能直接放到前端存储，容易产生安全问题，更好的做法是把秘钥交给后端管理，前端通过调用接口先获取秘钥，有了秘钥之后再进行上传操作

上述操作完成后继续下面实现方案

新建公共组件,src/components/UploadImg

<template><div><!--show-file-list: 是否显示上传的文件列表action: '#' 用来指定文件要上传的地址，由于我们需要定制上传动作这里设为#:http-request：自定义上传行为（重点）on-success: 上传成功之后的回调before-upload： 上传之前的检查:on-success="handleAvatarSuccess"--><el-uploadclass="avatar-uploader"action="#":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":http-request="upload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon" /></el-upload></div>
</template><script>
export default {data() {return {imageUrl: ''}},methods: {upload(file) {console.log(file)},handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw)},beforeAvatarUpload(file) {const isPNG = file.type === 'image/png'const isLt2M = file.size / 1024 / 1024 < 2if (!isPNG) {this.$message.error('上传头像图片只能是 PNG 格式!')}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')}return isPNG && isLt2M}}
}
</script><style>
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409eff;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
</style>

在项目中安装依赖

npm i cos-js-sdk-v5 --save

实例化cos对象
在src/components/UploadImg中

// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({SecretId: 'xxx', // 身份识别IDSecretKey: 'xxx' // 身份秘钥
})

主要是用cos.putObjectapi来完成上传功能，代码如下

upload(res) {if (res.file) {// 执行上传操作cos.putObject({Bucket: 'xxxxxx', /* 存储桶 */Region: 'xxxx', /* 存储桶所在地域，必须字段 */Key: res.file.name, /* 文件名 */StorageClass: 'STANDARD', // 上传模式, 标准模式Body: res.file // 上传文件对象}, (err, data) => {console.log(err || data)// 上传成功之后if (data.statusCode === 200) {this.imageUrl = `https:${data.Location}`}})}
}

使用实例

在需要用到的页面使用封装的组件

<template><div class="user-info"><!-- 个人信息 --><el-form ref="userForm" :model="userInfo" label-width="220px"><!--手机 --><el-row class="inline-info"><el-col :span="12"><el-form-item label="手机"><el-input v-model="userInfo.mobile" /></el-form-item></el-col></el-row><!-- 工号 入职时间 --><el-row class="inline-info"><el-col :span="12"><el-form-item label="入职时间"><el-date-pickerv-model="userInfo.timeOfEntry"type="date"class="inputW"value-format="yyyy-MM-dd"/></el-form-item></el-col></el-row><!-- 员工照片 --><el-row class="inline-info"><el-col :span="12"><el-form-item label="员工头像"><upload-img v-model="userInfo.staffPhoto" /></el-form-item></el-col></el-row><!-- 保存个人信息 --><el-row class="inline-info" type="flex" justify="center"><el-col :span="12"><el-button type="primary" @click="hSave">保存更新</el-button><el-button @click="$router.back()">返回</el-button></el-col></el-row></el-form></div>
</template>
<script>
import { getUserDetailById, saveUserDetailById } from '@/api/user.js'export default {data() {return {userInfo: {}}},created() {this.loadUserDatailById()},methods: {async loadUserDatailById() {const res = await getUserDetailById(this.$route.query.id)this.userInfo = res.data},async doSave() { // 保存信息try {await saveUserDetailById(this.userInfo)this.$message.success('保存成功')// 回到列表页this.$router.back()} catch (err) {this.$message.error(err.message)}},hSave() {this.$refs.userForm.validate(valid => {valid && this.doSave()})}}
}
</script><style scoped lang="scss">.user-info{padding-top:20px;}
</style>

封装组件配置如下

<template><div><el-uploadclass="avatar-uploader"action="#":show-file-list="false":before-upload="beforeAvatarUpload":http-request="upload"><img v-if="value" :src="value" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon" /><el-progress v-if="showProgress" :percentage="percent" /></el-upload></div>
</template><script>
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({SecretId: 'AKID1yiCQO5UdV6QTFSP5VeW6PRCgtpUsyoN', // 身份识别IDSecretKey: 'LPDk0ziEVVLuCDxRecKn0yhCRQ9cqoWz' // 身份秘钥
})
export default {props: {value: {type: String,default: ''}},data() {return {percent: 0, // 进度showProgress: false // 控制进度条显示隐藏}},methods: {upload(res) {if (res.file) {this.showProgress = true// 执行上传操作cos.putObject({Bucket: 'rz-1305999452', /* 存储桶 */Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */Key: res.file.name, /* 文件名 */StorageClass: 'STANDARD', // 上传模式, 标准模式Body: res.file, // 上传文件对象onProgress: (progressData) => { // 上传进度this.percent = progressData.percent}}, (err, data) => {console.log(err || data)// 上传成功之后if (data.statusCode === 200) {this.$emit('input', `https:${data.Location}`)}this.showProgress = false})}},beforeAvatarUpload(file) {return true}}
}
</script><style>
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;
}
.avatar-uploader .el-upload:hover {border-color: #409eff;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 178px;height: 178px;display: block;
}
</style>

腾讯云cos使用介绍相关推荐

阿里巴巴 OSS与AWS（亚马逊） S3 和腾讯云cos 存储服务介绍篇
前言对象存储服务,简单来说,可以把它当成一个"网盘",可以上传下载数据,也可以直接在这个"网盘"中对文件进行某些操作. 1.定时或者基于某种条件自动地,每天从 ...
Hadoop社区正式支持腾讯云COS，全球大数据开发者将无缝使用中国云存储
8月4日消息,知名大数据开源社区Hadoop近日宣布对腾讯云对象存储COS的正式支持.后续,开发者在基于Hadoop架构进行大数据分析时,能够在不修改代码的情况下,无缝高效地使用腾讯云COS来处理海量 ...
APP的文件数据直传腾讯云COS实践
简介本文主要介绍基于腾讯云对象存储COS,如何快速实现一个app的文件直传功能.您的服务器上只需要生成和管理访问密钥,无需关心细节,文件数据都存放在腾讯云 COS 上. 架构说明对于app应用,把 ...
腾讯cos做文件服务器,将腾讯云COS对象存储挂载至腾讯云服务器实现大硬盘存储...
老蒋在前面的文章中有介绍到腾讯云COS对象存储的用途还是比较大的,有我们常见的用来当做网盘使用,也可以将用来网站静态文件分离,同时还有可以作为数据同步备份.在这篇文章中,我还准备测试商家支持将COS挂 ...
华为云实战之对象存储的使用以及与腾讯云COS对比
一.OBS是什么 OBS即对象存储服务(Object Storage Service),是一个基于对象的海量存储服务,为客户提供海量.安全.高可靠.低成本的数据存储能力,包括:创建.修改.删除桶,上传 ...
（Ⅲ）使用七牛云作为图床获取外链方式总结（已更换为使用PicGO+腾讯云COS）
1. 图床的选择 (1) 什么是图床? 很多技术人写作都有在用 Markdown 轻量级标记语言进行博客写作,这种写作让我们不用像使用 Word 那么麻烦调整排版和格式,而只需专心写作照样完成排版的一 ...
（Ⅲ）使用七牛云作为图床获取外链方式总结（已更换为使用PicGO+腾讯云COS）...
1. 图床的选择 (1) 什么是图床? 很多技术人写作都有在用 Markdown 轻量级标记语言进行博客写作,这种写作让我们不用像使用 Word 那么麻烦调整排版和格式,而只需专心写作照样完成排版的一 ...
微信小程序---腾讯云cos的使用---前端上传图片+后端生成临时密钥
0. 腾讯云cos介绍: - 第一阶段:文件服务器,将文件存储在某个服务器(目录结构的划分). - 第二阶段:- 文件存储,将文件存储在某个服务器(目录结构的划分).- 对象存储,优化存储和操作优化( ...
基于腾讯云COS+CI图文音视频解决方案
从早期的门户网站,到后面的feeds流,再到如今的各种垂直行业的社区分享,一次次变更成就了近几年行业中的领跑者.从行业领先的微博,再看小红书.B站等等,绝对都是可以看到feeds和社区的影子.而其中跑 ...