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