一、图片存储方案介绍
1.存到自己公司购买的服务器上
- 优点:
好控制
- 缺点
成本高由于图片都存放到自己的服务器上,占据空间很大
2. 存到三方云服务器(阿里云,七牛云,腾讯云)
各种云有专门的为图片存储提供的云服务器,我们自己的服务器只存储图片地址即可
1.前端传
前端调用腾讯云API上传图片
2.后端传
图片文件传给自己的后端, 由后端上传到第三方图片服务器
二、腾讯云cos申请配置
1.创建账号并实名认证
1.1打开腾讯云,点击右上角登录,使用微信扫码进行登录
1.2注册或关联账号
1.3提示关注腾讯云并完成账号注册
1.4注册完成
1.5点击去实名认证,选择个人认证,进行实名认证
2.开通对象存储
3.创建存储桶
一直下一步直到完成
4.设置cors规则
4.1在存储桶列表中,选中存储桶
4.2在左侧的菜单中选安全管理
我是在测试上传,全部容许上传即可,真正的生产环境需要单独配置具体的域名和操作方法
5.配置云API秘钥
服务器属于个人的,需要一定的权限才能自由上传图片,这个负责权限验证的其实就是秘钥,也就是说拥有秘钥是进行上传的必要条件。
安全性提示
实际工作中,秘钥属于敏感信息,不能直接放到前端存储,容易产生安全问题,更好的做法是把秘钥交给后端管理,前端通过调用接口先获取秘钥,有了秘钥之后再进行上传操作
三、上传图片组件
使用的是基于 element 框架提供的 Upload 上传组件封装自己的上传组件 ,其他同理
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<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>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
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>
因为要自己设置上传行为,所以需要自定义上传属性,elementui文档Element - The world's most popular Vue UI framework
配置自定义上传属性
-
关键属性:
:http-request="upload" action="#"
-
使用自定义行为覆盖默认上传,注意一旦设置自定义上传行为之后,所有的上传操作都需要自己实现,比如数据处理,上传成功之后的后续操作,on-success 钩子函数也不会继续触发
-
修改组件代码
-
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="httpRequestFn"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> <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> <script> export default { data() { return { imageUrl: '' }; }, methods: { // 自定义上传函数 // http-request属性的回调函数有一个默认的参数,content 是一个对象,这个形参不用传实参 httpRequestFn(res) { console.log(res) cos.putObject({ Bucket: 'guotongxin-1309007594', /* 必须:存储桶 */ Region: 'ap-nanjing', /* 存储桶所在地域,必须字段 */ Key: res.file.name, /* 必须 :文件名 */ StorageClass: 'STANDARD', // 上传模式 Body: res.file, // 上传文件对象 onProgress: function(progressData) { // 进度条 console.log(JSON.stringify(progressData)) } }, (err, data) => { // 注意用箭头函数,否则会出现this的指向问题 console.log(err || data) if (data) { // 上传成功 this.imageUrl = `http://${data.Location}` console.log(this.$refs.uploadImg) } }) } } } </script>
四、上传图片到腾讯云
1.安装依赖
npm i cos-js-sdk-v5 --save
2.实例化 cos 对象
// 导入 cos 模块
const COS = require('cos-js-sdk-v5')
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
SecretId: 'xxx',
SecretKey: 'xxx'
})
3.使用 cos 对象完成上传
httpRequestFn(res) {
console.log(res)
cos.putObject({
Bucket: 'guotongxin-1309007594', /* 必须:存储桶 */
Region: 'ap-nanjing', /* 存储桶所在地域,必须字段 */
Key: res.file.name, /* 必须 :文件名 */
StorageClass: 'STANDARD', // 上传模式
Body: res.file, // 上传文件对象
onProgress: function(progressData) { // 进度条
console.log(JSON.stringify(progressData))
}
}, (err, data) => { // 注意用箭头函数,否则会出现this的指向问题
console.log(err || data)
if (data) { // 上传成功
this.imageUrl = `http://${data.Location}`
console.log(this.$refs.uploadImg)
}
})
}
4.如何查看 Bucket 和 Region
5.根据你的项目情况将imageUrl传给后台同步信息即可
SDK文档:对象存储 操作列表 - API 文档 - 文档中心 - 腾讯云
JavaScript SDK文档:对象存储 快速入门 - SDK 文档 - 文档中心 - 腾讯云