项目图片性能优化腾讯云cos申请配置

使用现成的腾讯云服务创建一个免费的云存储

 

 

 

 

 

案例操作

前置基础：

1.在云服务器上的准备：申请cos服务器，配置密钥,设置cors访问

2.在代码层面的准备：

(1) 下载一个官方提供的操作cos服务的包(cos-js-sdk-v5)

(2) 用自己的密钥去实例化cos

(3) 具体做上传

在项目中安装依赖

```
npm i cos-js-sdk-v5 --save
```

### **实例化cos对象**

在`src/components/UploadImg`中

```js
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'xxx', // 身份识别ID
  SecretKey: 'xxx' // 身份秘钥
})
```

 

使用cos对象完成上传

upload(res) {
  if (res.file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'xxxxxx', /* 存储桶 */
      Region: 'xxxx', /* 存储桶所在地域，必须字段 */
      Key: res.file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: res.file // 上传文件对象
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        this.imageUrl = `https:${data.Location}`
      }
    })
  }
}