前言

在用Vue做后台管理系统的时候，有一个需求是上传图片，文件。为了节省内存和方便管理，通常我们会把大文件存储到云服务器，把云服务器返回的地址存储到自己的后台服务器，用字符串代替图片及文件。那这是如何实现的呢?快来看看操作步骤~

---

一、为什么要把大文件存储到云服务器?

• 云服务器在计算能力、存储空间等各方面都要比自己的服务器强大的多
• 图片的大小比url字符串大得多
• 减小自己服务器的压力
• 云服务器注册后就可以获得免费存储空间，成本低

二、如何申请云服务器？

以下以腾讯云为例 腾讯云官网

1.注册账号

• 可以使用微信扫码后一键注册
• 填写个人信息
• 实名认证（刷脸）

2.申请对象存储

注册成功后，在腾讯云首页搜索 对象存储  然后点击立即使用，随后会提醒未开启 cos 服务，同意协议后开通服务。  随后点击新建存储桶,所属地域可以选自己所在地。

3.开启跨域访问CORS设置

点击存储桶名称  点击安全管理里边的跨域访问CORS设置。  点击添加规则,测试阶段，先让所有域名均可以访问。 

4、访问密钥

要通过代码向云服务器上传文件，需要用到访问密钥。  搜索完成后按照提示，将密钥保存好。  腾讯云文档：对象存储

三、如何用代码向云服务器上传文件？

1、下载第三方包

需要用到cos-js-sdk-v5,可以使用npm install cos-js-sdk-v5 -S命令下载到Vue项目中。

2、实例化cos对象

这里就需要用到上面密钥了，复制过来即可。

代码如下（示例）：

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

3、使用cos提供的api完成上传

该API需要用到对象存储的基本信息，可以按下图操作。 

代码如下（示例）：

在Vue项目中的methods中写一个上传的方法，使用cos提供的putObject完成上传动作。

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) {
     // 上传成功后将服务器返回的地址存储下来
       const url = `https://${data.Location}`
       console.log('云服务器返回的地址是：' + url)
     }
   })