本文已参与[新人创作礼]活动，一起开启掘金创作之路。
记得先注册哦(づ￣3￣)づ╭❤～
1.准备工作
步骤1：控制台扫码登录并搜索对象存储
步骤2：创建存储桶
（1）
（2）
（3）
步骤3：设置cors规则
因为我们是在测试上传，全部容许上传即可，真正的生产环境需要单独配置具体的域名和操作方法
步骤4: 配置云API秘钥
服务器属于个人的，需要一定的权限才能自由上传图片，这个负责权限验证的其实就是秘钥。拥有秘钥是进行上传的基础条件。
步骤5：秘钥配置
注意：密钥管理是和存储桶列表同级下滑即可找到
步骤6：访问密钥
注意1：密钥这里需要记住后面要用 注意2：实际工作中，秘钥属于敏感信息，不能直接放到前端存储，容易产生安全问题，更好的做法是把秘钥交给后端管理，前端通过调用接口先获取秘钥，有了秘钥之后再进行上传操作
这里我们使用图片上传来简单使用腾讯云
2.目标：封装一个组件，用来把图片上传到cos中。
步骤7：新建公共上传组件（这里我们使用elementUI）
<template>
<div>
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="handleClick"
>
<!--
show-file-list: 是否显示上传的文件列表
action: '#' 用来指定文件要上传的地址，由于我们需要定制上传动作
这里设为#
:http-request：自定义上传行为（重点）
on-success: 上传成功之后的回调
before-upload： 上传之前的检查
-->
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
<el-progress v-if="showProgress" :percentage="percent" />
</el-upload>
</div>
</template>
<script>
export default {
name: 'UploadImg',
data() {
return {
imageUrl: '',
showProgress: false
}
},
methods: {
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>
****
</style>
步骤8：全局注册（这里是单个注册组件如果想看批量注册全局组件的请点下方无缝连接）
juejin.cn/post/708347… ( ఠൠఠ )ﾉ
src/components/index.js
// 全局注册组件
// 省略其他....
+ import UploadImg from '@/components/UploadImg'
// 1.定义插件(拓展Vue的功能)
const MyPlugin = {
install(Vue) {
// 省略其他....
+ Vue.component(UploadImg.name, UploadImg)
}
}
export default MyPlugin
步骤9：图片上传组件-封装组件-上传图片到腾讯云
下载一个官方提供的操作cos服务的包(cos-js-sdk-v5)
用前边注册的对象存储功能，将图片上传到腾讯云，根据cos的上传API实现上传功能
步骤10：实例化cos对象
在src/components/UploadImg中
handleClick({ file }) {
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
SecretId: 'xxx', // 身份识别ID
SecretKey: 'xxx' // 身份秘钥
})
}
注意：此时我们就需要使用之前在腾讯云中注册的存储桶和访问密钥
访问密钥上面有写
步骤11：查询存储桶
这里我们就可以看到存储桶名称和所属地域（这里使用的是括号内的英文）
步骤12：使用cos对象完成上传
handleClick({ file }) {
var COS = require('cos-js-sdk-v5')
var cos = new COS({
SecretId: '*****',
SecretKey: '******'
})
cos.putObject({
Bucket: '*****', /* 存储桶 */
Region: '******', /* 存储桶所在地域，必须字段 */
Key: file.name, /* 文件名 */
StorageClass: 'STANDARD', // 上传模式, 标准模式
Body: file, // 上传文件对象
}, (err,data) => {
this.showProgress = false
// 上传成功之后
this.imageUrl = 'https://' + data.Location
// }
})
}
步骤13：进度条: 现成的组件：el-progress
js（在cos.putObject中）
onProgress: function(progressData) {
// console.log(JSON.stringify(progressData))
this.percent = progressData.percent * 100
}
整理
// 显示进度条
+ this.showProgress = true
cos.putObject前
+ this.percent = progressData.percent * 100
}
}, (err, data) => {
// 隐藏进度条
+ this.showProgress = false
html
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
+ <el-progress v-if="showProgress" :percentage="percent" />
