图片存储的两种方案？
方案一:存到公司购买的服务器上面--
优点：好控制
缺点：存到第三方云服务器 (阿里云，百度云，腾讯云......)
存储流程：
腾讯云申请配置流程
1.在腾讯云中创建帐号并实名认证--选择认证类型(注意哦！第一次注册会弹出以下页面)
2.开通对象存储需要（实名认证，视频校验，居住地址，......）
3.创建存储桶
4.设置cors规则
在存储桶列表中，选中存储桶
在左侧的菜单栏中选中安萱管理
【因为我们是在测试上传，全部容许上传即可，真正的生产环境需要单独配置具体的域名和操作方法】
5.配置云API密匙
因为服务器属于个人的，需要一定的权限才能自由上传图片，这负责权限验证的就是密钥，拥有密钥是上传的基础条件
设置密钥
API密钥管理
安全性提示
实际工作中，秘钥属于敏感信息，不能直接放到前端存储，容易产生安全问题，更好的做法是把秘钥交给后端管理，前端通过调用接口先获取秘钥，有了秘钥之后再进行上传操作
上传组件基本思路
前置基础：
1.在云服务器上，申请cos服务器，配置密钥，设置cos访问
2.代码部分：
1.下载一个官方提供的操作cos服务的包 （cos-js-sdkv）
2.用自己的密钥去实例化cos
3.上传
安装依赖：
在项目中安装依赖：npm i cos-js-sdk-v5 --save
实例化cos对象：(固定写法)
上边用到的SecretId和SecretKey在这里找到：
使用cos对象完成上传
封装一个上传组件：引用Element组件中的upload上传组件
关键属性：:http-request="upload" action="#"
使用的自定义行为付给默认上传，注意一旦设置自定义上传行为之后，所有的上传操作都需要自己实现，比如：数据处理，上传成功之后的后续操作， on-success钩子函数也不会继续触发
<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"
: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>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
SecretId: 'xxxxxx', // 身份识别ID
SecretKey: 'xxxxx' // 身份秘钥
})
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
upload(res) {
if (res.file) {
// 执行上传操作
cos.putObject(
{
Bucket: 'xxxxxx' /* 存储桶 */,
Region: 'xxxxxx' /* 存储桶所在地域，必须字段 */,
Key: res.file.name /* 文件名 */,
StorageClass: 'STANDARD', // 上传模式, 标准模式
Body: res.file // 上传文件对象
},
(err, data) => {
console.log(err || data) // err是上传之后,data是上传失败之后
// 上传成功之后
if (data.statusCode === 200) {
this.imageUrl = `https:${data.Location}`
}
}
)
}
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
}
}
}
</script>
这样就上传成功了
