[小黄书后台]文件上传到CDN
上一篇文章我们通过multer这个中间件将图片顺利的上传到了我们的服务器上面，且将图片的元数据存储到了Image这个mongodb的collections里面。
这一章我们看下应该如何将文件上传到cdn，以便客户端通过cdn来快速访问图片。
这里我们用到的cdn是又拍云的，国内知名度比较高，且注册认证后会送1个月的免费券。
我们要达成的目标是:
在配置文件提供一个开关，打开的话会将图片传送到服务器之后再上传到cdn
如果开关关闭，则只是上传到服务器
将文件上传到cdn
删除文件时同时把cdn上的文件也删除掉
1. 又拍云
又拍云的使用强烈建议去看官方文档，这里只做简单的描述。
1.1. 注册账号
我们可以到又拍云中注册一个账号：
https://www.upyun.com/
注册完之后进行实名认证，然后可以得到一张有一个月使用权限的代金券，这足够我们去体验又拍云的cdn的功能了。
1.2. 创建又拍云cdn服务
登录后进入服务页面，点击右上角的创建服务。
在弹出框中选择创建”全网加速服务“。
注意：
服务名称要唯一。对应我们下面通过又拍云的node-sdk连接又拍云时需要用到的‘bucket’
源站类型选择‘又拍云’，自主源和又拍云选项的区别是:
- 自主源站：表示资源都存放在客户自己的源站或第三方云存储服务上，仅使用又拍云 CDN 服务
- upyun存储：表示资源都存放在又拍云分布式对象存储服务上，同时附加了 CDN 的支持，因此也拥有绝大多数又拍云 CDN 的功能
服务授权（操作员）： 设定／建立操作员，我们在又拍云的node-sdk连接又拍云时需要用到。这里我创建了一个叫做techgogogo的用户。
服务建立好后可以在服务页面中看到：
其中的加速域名就是我们上传图片到cdn后，访问图片所需要指定的域名。
2. 上传图片到又拍云
又拍云根据不同的开发语言提供了不同的访问sdk，我们这里用的是nodejs版本的：
https://github.com/upyun/node-sdk
2.1 接入又拍云
根据官方阐述，通过又拍云的node-sdk，我们可以通过以下方式接入又拍云：
var upyun = new UpYun(bucket, operator, password [, endpoint], [, options]);
其中参数意义如下:
- bucket: 你要使用的 upyun 空间名字。这里就是我们上面增加的‘xiaohuangshu’这个服务。
- operator: 拥有 bucket 授权的操作员。这里就是我们上面添加的techgogogo这个操作员
- password: 拥有 bucket 授权的操作员的密码。techgogogo操作员的密码
- endpoint: API 接入点，可以刷是如下值(我们选择第一种):
- v0.api.upyun.com : 自动选择合适的线路
- v1.api.upyun.com : 电信线路
- v2.api.upyun.com : 联通（网通）线路
- v3.api.upyun.com : 移动（铁通）线路
- options: 使用选项，可以指定以下选项
- options.apiVersion 如果不指定，则使用旧版 API，新版 API 可以指定为 v2。我们这里用的就是v2
- options.secret 如果指定，则可以使用 form 上传。 我们这里通过restful api来上传，所以留空。
注：旧版 API 已不再更新，请指定 options.apiVersion 为 v2 使用新版 API。
因为这里有阿里云个人隐私性的信息，不应该上传到github上。所以我会在config目录下创建一个叫做confidential.js的文件，然后写入如下内容:
module.exports = {upload: {protocol: 'http://', // 小黄书又拍云访问协议host: 'xiaohuangshu.b0.upaiyun.com', // 小黄书服务访问地址endpoint: 'v0.api.upyun.com', // 接入点bucket: 'xiaohuangshu', // 服务名称operator: 'techgogogo', // 小黄书操作员用户名password: 'xxxx', // 小黄书操作员密码。请根据您自己的情况填写api_version: 'v2', // api版本号},
};
然后在.gitignore中加入以下一行来让git push时不要上传confidential.js文件:
server/config/confidential.js
这样，我们就可以在处理文件上传的file.js文件中接入又拍云了：
const confidential = require('../config/confidential');
const UPYUN = require('upyun');
const upyun = new UPYUN(confidential.upload.bucket, confidential.upload.operator, confidential.upload.password, confidential.upload.endpoint, {apiVersion:confidential.upload.api_version});2.2. 上传文件到又拍云
上传文件到又拍云的api：
putFile(remotePath, localFile, type, checksum, opts, callback)
其中参数释义如下:
- remotePath: 文件存放路径
- localFile: 欲上传的文件，文件的本地路径 或者文件对应的 buffer
- type: 指定文件的 Content-Type, 如果传 null, 这时服务器会自动判断文件类型
- checksum: 为 true时 SDK 会计算文件的 md5 值并将其传于 API 校验
- opts: 其他请求头部参数（以 JS 对象格式传入，常用于图片处理等需求）
如文章开头所说，我们需要控制文件是否需要上传到cdn，所以我们在config/configuration.js增加配置如下:
upload: {to_upyun: true, // 是否上传到又拍云}
然后在上传图片的路由中实现又拍云上传图片的逻辑:
filename = `${req.file.filename}`;if (config.upload.to_upyun) {upyun.putFile(filename, req.file.path, req.file.mimetype, true, {}, async(err, result) => {if (err) {log.error('Upyun error', err, err.stack);res.status(500).send('Failed to sync to cdn server');return;}if (result.statusCode !== 200) {log.error('Upyun error', result);res.status(500).send('Upyun response with error');return;}...})}
其中putFile的参数对比上面的参数释义则一目了然，无需我做过多解析。
2.3. 从又拍云移除文件
和在上传图片到服务器后，根据配置开关决定是否上传到又拍云一样，我们在删除图片时，也要根据开关判断我们是否需要删除又拍云上对应的图片。
又拍云删除一个文件的api如下:
deleteFile(remotePath, callback)
其中参数释义如下:
- remotePath: 文件在 upyun 空间的路径。 和上面的putFile的的第一个参数removePath一致。
我们在删除图片的路由中实现这个逻辑:
if (config.upload.to_upyun) {upyun.deleteFile(file.filename, async(err, result) => {if (err) {log.error('Upyun error', err, err.stack);res.status(500).send('Failed to del cdn server');return;}if (result.statusCode !== 200) {log.error('Upyun error', result);res.status(500).send('Upyun response with error');return;}...});}
3. 结语
详细实现请查看github中的代码。
- git clone https://github.com/zhubaitian/XiaoHuangShuServer.git
- cd XiaoHuangShuServer/
- git checkout CH07
- npm install
- gulp dev
这一系列文章其实我写了有段时间了，后来忙起来忘了发布了
[小黄书后台]文件上传到CDN相关推荐
- [小黄书后台]文件上传到服务器
上一篇文章我们实现了小黄书后台框架中的鉴权服务.今天我们会开始实现文件上传的服务,因为我们参考的小红书中有很多地方是需要上传图片的,比如商品的图片等. 1. Express Multer中间件 Exp ...
- 微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
- 漏洞案例之z-blog后台文件上传
z-blog后台文件上传 后台登录地址 php版本后台登录地址:你的域名/zb_system/login.php asp版本后台登录地址:后缀为/zb_system/login.asp zblogge ...
- 微信小程序+SpringBoot实现文件上传与下载
微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...
- Apache Axis2 后台文件上传getshell 漏洞复现
0x00 前言 Apache Axis2是一个Web服务的核心支援引擎.AXIS2对旧有的AXIS重新设计及重写,并提供两种语言Java及C的开发版本. 事实上AXIS2 不只为WEB应用程序提供We ...
- [小黄书后台]手机短信验证码
上一章我们实现了将图片上传到又拍云上的功能.今天我们会实现手机验证码的功能. 我们现在到处都会碰到手机验证码的验证方式,比如在注册的时候,通过输入手机号码,获取一个验证码,然后输入完成注册. 1. 螺 ...
- [小黄书后台]会员管理及微信授权登录
通过前几章小程序的UI实践,我们小黄书的Home页面已经有一个基本的呈现.但是,所有的数据还都只是mock模拟的数据,还没有任何跟小黄书服务器进行交互的动作. 今天开始,我们会逐步增加小程序和服务器的 ...
- [小黄书后台]Insomnia及HelloWorld
我们今天开始迈出小黄书项目实战的第一步.前几篇文章就主要围绕Nodejs+Express的架构的构建.当我们架构建好之后,到时我们只需要在需要的位置填写代码就好了,开发起来就能非常快速. 本篇文章作为 ...
- java http 上传文件_java利用httpClient实现后台文件上传请求
之前写过基于html和js的文件上传方法java 用springMVC 和HttpServletRequest 两种实现文件上传的方法和httpClient后台执行普通post请求的文章java通过h ...
最新文章
- 调研字节码插桩技术，用于系统监控设计和实现
- 如何破解root以及grub密码
- 联想微型计算机 m4350q,比超极本便携 评联想M4350q小型台式机
- python 动态类型检测 性能_4种速度最慢的动态编程语言，你一定用过
- php接收arduino向服务器发来的请求
- python连接mysql查询一个数据_使用Connector / Python连接MySQL/查询数据
- shiro学习(17)：easyui布局测试
- 代码中log一直报错
- 软件开发计划_软件开发的流程是怎么样的？福州IT告诉你：这五点是你需要掌握的...
- ASP.net2.0页面运行时“无法显示XML页”的解决办法
- JavaScript课堂笔记！
- mnist tensorrt 运行_TensorRT学习笔记（三）
- Linux驱动之定时器（mod_timer）
- linux Redis下载及安装
- 牛客网华为机试在线训练JavaScript版解答
- 【技能】Zoho CRM系统无代码集成智齿客服、企业微信群机器人方法
- 270天不回家的“空中飞人们” 下一步要去哪里？
- 抢红包算法 c语言版本,抢红包算法实现示例
- 看完这些在HW面试官面前横着走 HW面试常见问题大合集（适合第一次参加）
- Sql Server 课堂笔记
热门文章