存储在第三方云服务器（阿里云，腾讯云，七牛云等...）
第三方云有专门存储图片的服务器（桶），自己公司的服务器只需要存储图片地址即可
示例腾讯云申请配置
使用腾讯云服务创建一个免费的云存储
1 进入腾讯云官网：腾讯云 产业智变·云启未来 - 腾讯 (tencent.com)；
2 点击右上角免费注册，注册成功后进行实名认证。
3 在首页搜索对象存储，然后点击立即使用。
4 在对象存储首页创建存储桶。
输入自己想要的名称，选择公有读私有写
5 设置cors规则: 在左侧 存储桶列表 中，点击刚创建的存储桶，再次点击左侧 安全管理 中的 跨域访问CORS设置 点击 添加规则 然后按照自身需求配置规则
6 配置云API秘钥：私人账号登录的服务器属于个人，需要一定的权限才能自由上传图片，这个负责权限验证的其实就是秘钥。拥有秘钥是进行上传的基础条件; 首次生成秘钥在下图搜索框 搜索 访问秘钥； 然后在API秘钥管理中新建秘钥即可
安全性提示
实际工作中，秘钥属于敏感信息，不能直接放到前端存储，容易产生安全问题，更好的做法是把秘钥交给后端管理，前端通过调用接口先获取秘钥，有了秘钥之后再进行上传操作
以上我们就完成了准备工作~
编辑器中使用
安装腾讯云 js-sdk
npm i cos-js-sdk-v5
yarn add cos-js-sdk-v5
使用 Element 的 Upload 上传组件
<template>
<el-upload
class="avatar-uploader"
action="" //最好不删除
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:http-request="upLoadImage"
>
<img v-if="value" :src="value" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
import COS from 'cos-js-sdk-v5' //引入包 必要可在 package.json 中输入版本号 '^1.4.17'
export default {
props: {
value: {
type: null,
required: true,
}
},
data() {
return {
};
},
methods: {
// 选择图片上传
upLoadImage(e) {
const file = e.file
// console.log(e.file)
const cos = new COS({
SecretId: '填入秘钥id',
SecretKey: '填入秘钥key'
}) // 完成cos对象的初始化
cos.putObject({
Bucket: '填入存储桶名称',
Region: 'ap-nanjing', // 地域名称
Key: e.file.name, // 文件名称
StorageClass: 'STANDARD', // 固定值
Body: file // 文件对象
}, (err, data) => {
if (data.statusCode === 200 && data.Location) {
// 拿到腾讯云返回的地址
this.$emit('input', 'http://' + data.Location) // 将地址返回给父组件
} else {
this.$message.error(err.Message) // 上传失败提示消息
}
})
},
handleAvatarSuccess(res, file) {
this.value = 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>
<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>
SDK方法可进入腾讯云 文档中心 进行查看 (顶部导航栏 客户支持)
