各种云有专门的为图片存储提供的云服务器，我们自己的服务器只存储图片地址即可
腾讯云cos申请配置
目标
使用现成的腾讯云服务创建一个免费的云存储。
官网：cloud.tencent.com/
创建账号并实名认证
在腾讯云中创建帐号并实名认证
开通对象存储
（实名认证，视频校验，居住地址，......）
设置cors规则
在存储桶列表中，选中存储桶
在左侧的菜单中选安全管理
因为我们是在测试上传，全部容许上传即可，真正的生产环境需要单独配置具体的域名和操作方法
配置云API秘钥
服务器属于个人的，需要一定的权限才能自由上传图片，这个负责权限验证的其实就是秘钥。拥有秘钥是进行上传的基础条件。
秘钥配置
安全性提示
实际工作中，秘钥属于敏感信息，不能直接放到前端存储，容易产生安全问题，更好的做法是把秘钥交给后端管理，前端通过调用接口先获取秘钥，有了秘钥之后再进行上传操作
以上我们就完成了，所有的准备工作~
图片上传组件-封装组件-基本思路
目标
封装一个组件，用来把图片上传到cos中， 了解思路
图片上传组件-封装组件-upload二次封装
目标
基于elementUI的upload组件封装一个通用的上传组件供业务组件使用
上传需求理解
前端主动发起图片上传使用的是三方的腾讯云上传接口，前端得到一个已经上传完毕的图片地址，然后把这个地址当成一个接口字段 传给我们自己的后端服务
安装依赖
在项目中安装依赖 npm i cos-js-sdk-v5 --save
代码语言：javascript复制<template>
<div style="width:230px">
<!--
show-file-list: 是否显示上传的文件列表
action:用来指定文件要上传的地址，由于我们需要定制上传动作
这里设为#
:http-request：自定义上传行为（重点）
on-success: 上传成功之后的回调
before-upload： 上传之前的检查
-->
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
: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-upload>
<el-progress v-if="showProgress" :percentage="percentage" />
</div>
</template>
<script>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
SecretId: 'AKIDEI7fx·········', // 腾讯云份识别ID自己扫码查询
SecretKey: '91cx····················' // 身份秘钥
})
export default {
name: 'UploadImg',
props: {
value: {
type: String,
required: true
}
},
data() {
return {
showProgress: false,
percentage: 20 // 上传进度条
}
},
methods: {
upload(res) {
console.log('上传的文件是', res.file)
if (!res.file) {
return
}
this.showProgress = true // 显示进度条
// 1. 把图片上传到腾讯云COS
// 执行上传操作
cos.putObject({
Bucket: 'wh66-1258898967', /* 存储桶 */
Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */
Key: res.file.name, /* 文件名 */
StorageClass: 'STANDARD', // 上传模式, 标准模式
Body: res.file, // 上传文件对象
onProgress: (progressData) => {
console.log('上传的进度', JSON.stringify(progressData))
this.percentage = progressData.percent * 100
}
}, (err, data) => {
console.log(err)
console.log(data)
// 上传成功之后
if (data.statusCode === 200) {
// 2. 显示图片
// this.imageUrl = `https:${data.Location}`
// 3. 通知父组件
this.$emit('input', `https:${data.Location}`)
}
this.showProgress = false
})
},
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>
复制代码父组件直接使用此组件
代码语言：javascript复制 <UploadImg v-model="userInfo.staffPhoto" />
复制代码userInfo.staffPhoto是存储位置
