腾讯云cos使用介绍
腾讯云cos申请配置
目标
使用现成的腾讯云服务创建一个免费的云存储。
创建账号并实名认证
在腾讯云中创建帐号并实名认证
开通对象存储
创建存储桶
设置cors规则
在存储桶列表中,选中存储桶
在左侧的菜单中选安全管理
因为我们是在测试上传,全部容许上传即可,真正的生产环境需要单独配置具体的域名和操作方法
配置云API秘钥
服务器属于个人的,需要一定的权限才能自由上传图片,这个负责权限验证的其实就是秘钥,也就是说拥有秘钥是进行上传的必要条件。
秘钥配置
API密钥管理
安全性提示
实际工作中,秘钥属于敏感信息,不能直接放到前端存储,容易产生安全问题,更好的做法是把秘钥交给后端管理,前端通过调用接口先获取秘钥,有了秘钥之后再进行上传操作
上述操作完成后继续下面实现方案
- 新建公共组件,src/components/UploadImg
<template>
<div>
<!--
show-file-list: 是否显示上传的文件列表
action: '#' 用来指定文件要上传的地址,由于我们需要定制上传动作
这里设为#
:http-request:自定义上传行为(重点)
on-success: 上传成功之后的回调
before-upload: 上传之前的检查
:on-success="handleAvatarSuccess"
-->
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="upload"
>
<img v-if="imageUrl" :src="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 < 2
if (!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', // 身份识别ID
SecretKey: 'xxx' // 身份秘钥
})
- 主要是用
cos.putObject
api来完成上传功能,代码如下
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-picker
v-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-upload
class="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', // 身份识别ID
SecretKey: '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>
能不能摆一下: 看不明白啊 你后面引入这部分