配置腾讯云Cos
在这我们以一个简单的上传图片为例，来用一下腾讯云对象存储
上边图的意思是，我们可以找一个免费上传图片的服务器，帮我们代管图片，我们在自己的数据库里只保存一个地址就行，这其实也是很多项目的处理方案，会有一个公共的文件服务器
第一步，我们必须先拥有一个腾讯云的开发者账号
请按照腾讯云的注册方式，注册自己的账号
第二步，实名认证
选择个人账户
下一步，扫描二维码授权
手机端授权
点击领取免费产品
点击0元使用，开通服务
到这一步，账号的部分就操作完毕，接下来我门需要创建一个存储图片的存储桶
登录对象存储控制台，创建存储桶。设置存储桶的权限为公有读，私有写
创建存储桶
设置cors规则
AllowHeader需配成*，如图所示
获取密钥
这个规则仅限于测试，正式环境的话，这里需要配置真实的域名地址
到这里，我们的腾讯云存储桶就设置好了
引入腾讯云包
首先我们要先安装SDK依赖
npm i cos-js-sdk-v5 --save
在项目中引入如下代码
var COS = require(‘cos-js-sdk-v5’);
这是里我们腾讯云提供的密钥，接下来我们就可以连接腾讯云的存储桶了
具体代码：
<el-uploadclass="avatar-uploader":on-preview="preview"list-type="picture"action="#":limit="2":http-request="upload":on-change="changeFile":on-remove="handleremove":before-upload="beforeUpload"><i class="el-icon-plus avatar-uploader-icon"></i></el-upload><el-progressv-if="showpercent"style="width: 180px":percentage="percent"/><el-dialog title="图片" :visible.sync="showDialog"><img :src="imgUrl" style="width: 100%" /></el-dialog>
export default {data () {return {fileList: [],//图片地址为数组showDialog: false,imgUrl: '',currentFileUid: '',showpercent: false,percent: 0}},methods: {beforeUpload (file) {console.log(file)const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']if (!types.includes(file.type)) {this.$message.error('上传图片只能是JPG、GIF、BMP、PNG格式！')return false}const maxSize = 5 * 1024 * 1024if (maxSize < file.size) {this.$message.error('图片大小最大不能超过5M')return false}this.currentFileUid = file.uidthis.showpercent = truereturn true},changeFile (file, fileList) {this.fileList = fileList.map(item => item)},handleremove (file) {console.log(file)this.fileList = this.fileList.filter(item => item.uid !== file.uid)cos.deleteObject({Bucket: 'zhangjiawei-1305896912', /* 必须 */Region: 'ap-nanjing',/* 存储桶所在地域，必须字段 */Key: file.name /* 必须 */}, (err, data) => {if (!err && data.statusCode === 204) {this.$message.success('删除成功')return}});},preview (file) {this.imgUrl = file.urlthis.showDialog = true},upload (params) {if (params.file) {// 执行上传操作cos.putObject({Bucket: '', // 存储桶名字Region: '', // 地域Key: params.file.name, // 文件名Body: params.file, // 要上传的文件对象StorageClass: 'STANDARD',// 上传的模式类型 直接默认 标准模式即可// 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件 格式 名称 回调onProgress: (params) => {this.percent = params.percent * 100}}, (err, data) => {// data返回数据之后 应该如何处理console.log(err || data)if (!err && data.statusCode === 200) {this.fileList = this.fileList.map(item => {if (item.uid === this.currentFileUid) {return {url: 'http//' + data.Location, upload: true }}return item})setTimeout(() => {this.showpercent = false//隐藏仅需条this.percent = 0}, 2000)}})}}}}</script>
详情请看腾讯云SDK文档
