目录

  • 前言
  • 一、为什么要把大文件存储到云服务器?
  • 二、如何申请云服务器?
  • 1.注册账号
  • 2.申请对象存储
  • 3.开启跨域访问CORS设置
  • 4、访问密钥
  • 三、如何用代码向云服务器上传文件?
  • 1、下载第三方包
  • 2、实例化cos对象
  • 3、使用cos提供的api完成上传
  • 总结



前言

这两天用Vue做后台管理系统的时候,要把大文件存储到云服务器,自己服务器存储云服务器返回的地址。那这是如何实现的呢?快来看看操作步骤~


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

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

二、如何申请云服务器?

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

1.注册账号

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

2.申请对象存储

注册成功后,在腾讯云首页搜索 对象存储

云服务器怎么互传文件 云服务器怎么上传文件_上传


然后点击立即使用,随后会提醒未开启cos 服务,同意协议后开通服务。

云服务器怎么互传文件 云服务器怎么上传文件_上传_02


随后点击新建存储桶,所属地域可以选自己所在地。

云服务器怎么互传文件 云服务器怎么上传文件_vue.js_03

3.开启跨域访问CORS设置

点击存储桶名称

云服务器怎么互传文件 云服务器怎么上传文件_上传_04


点击安全管理里边的跨域访问CORS设置。

云服务器怎么互传文件 云服务器怎么上传文件_云服务器怎么互传文件_05


点击添加规则,测试阶段,先让所有域名均可以访问。

云服务器怎么互传文件 云服务器怎么上传文件_云服务器怎么互传文件_06

4、访问密钥

要通过代码向云服务器上传文件,需要用到访问密钥。

云服务器怎么互传文件 云服务器怎么上传文件_对象存储_07


搜索完成后按照提示,将密钥保存好。

云服务器怎么互传文件 云服务器怎么上传文件_云服务_08


腾讯云文档:对象存储

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

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需要用到对象存储的基本信息,可以按下图操作。

云服务器怎么互传文件 云服务器怎么上传文件_上传_04

云服务器怎么互传文件 云服务器怎么上传文件_上传_10

代码如下(示例):

在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)
     }
   })