Node开发文件上传系统及向七牛云存储和亚马逊AWSS3的文件上传

背景起,有奏乐:

有伟人曰:学习技能的最好途径莫过于理论与实践相结合。

初学Node这货时,每每读教程必会Fall asleep。

当真要开发系统时,顿觉精神百倍,即便踩坑无数也不失斗志。

因为同团队的小伙伴们都在辛勤工作,正是因为他们的工作,

才让我有足够的时间拖着我疲软的智商来研究Node和AWS这些货。

系统完成,虽不尽完善,但不敢怠慢,迅速记录,免遗忘。

为后续更新和开发做一参考。

这就是人生。只要努力,便美美哒。

标题略长,其实这系统要做的事只三件:

1. 从本地上传文件到我们自己的服务器,并存储。

2. 将文件上传到七牛云存储。

3. 将文件上传到亚马逊的AWS S3存储。

几处说明:

1. 用Node的好处是写服务端代码也不用纠结语法问题了:

系统的开发用Node完成。写前后端都是JS,免去了语法的困扰。

不仅回忆起数日之前写Scala时对语法的纠结和困惑,一身冷汗。

2. Plupload是个好东东:

Client端的File Select用Plupload完成。

有了Plupload这货,再不纠结<input type='file'>的难看样式的兼容问题不好把控了。

Plupload虽然对File做了封装,但也提供了如 getNative 等的接口供我们访问原生。

十分体贴。

3. AWS的Upload在前端完成:

真相只有一个:在Node服务端的AWS的Upload我还没跑通……

请尽情的鄙视我吧T_T

好在路路通罗马。我绕路从前端赶到了罗马。

服务端请求的Block在这里:

从服务端向AWS上传文件时,其文件的Body以流方式被分块上传。

测试后发现,上传完成,也只传了部分,导致文件无法正常访问。

而在前端上传时,直接用原生File对象即可实现上传。

遂成功抵达罗马。

关于在服务端的上传问题,有待继续研究。

学海无涯0_0

4. 七牛的上传在服务端完成:

七牛的上传也可以在前端完成,只不过七牛自己的JS-SDK包裹了Plupload。

由于我的上传逻辑是由自己的Plupload来触发七牛和亚马逊(或其他第三方上传),

因此不在前端再New一个Plupload来做七牛的上传了。

New两个同样的东西实在是太二了好么。

设计的理念是,所有第三方上传都必须在我们的服务器Trigger之后才发生。

就酱任性。

—————— 我是冬季里颤巍巍的分割线 ——————

主要逻辑和部分代码:

1. 主程序和框架:

使用Express框架和Jade渲染引擎。

主程序app.js只做服务器的创建和监听,

涉及业务逻辑的请求和处理,都写在二级目录(./routes)的模块里。

app.js 的部分内容如下:

 3 var express = require('express'); 
4
var favicon = require('serve-favicon'); 5 var bodyParser = require('body-parser'); 6 var debug = require('debug')('express:server'); 7 var http = require('http'); 8 var port = normalizePort(process.env.PORT || '3038'); 9 var app = express(); 10 var server = http.createServer(app); 11 var index = require('./routes/index'); // 业务逻辑在这里 12 13 app.set('port', port); 14 server.on('error', serverOnError); 15 server.on('listening', serverOnListening); 16 server.on('connection', serverOnConnecting); 17 server.listen(port); 18 19 app.set('views', path.join(__dirname, 'views')); 20 app.set('view engine', 'jade'); 21 app.use(favicon(path.join(__dirname, 'public/lib', 'favicon.ico'))); 22 app.use(bodyParser.json()); 23 app.use(bodyParser.urlencoded({ extended: true })); 24 app.use(express.static(path.join(__dirname, 'public'))); 25 26 app.use('/', index);

1 /* ====================================================== */

2 module.exports = app; 

2. POST请求将文件上传并存储在本地服务器:

需要注意的是,这里的POST请求用到了中间件:

1 var multipart = require('connect-multiparty');
3 var multipartMiddleware = multipart();
5 var express = require('express');
7 var router = express.Router();
9 router.post( ‘/saveInLocalServer’, multipartMiddleware, function(req, res){ 。。。});

这个请求接收的是从前端的Plupload上传的File,

神秘的中间件会在服务器生成临时文件,但不会删除它们。

因此在处理的最后要手动删除临时文件req.files。How to?

收到请求后,处理文件的部分代码如下:

 1 var file = req.files.file;
 2 var tempPath = file.path,
 3     fileName = file.name,
 4     fileType = file.type,
 5     fileSize = file.size;
 6 var uploadDirName = dirName.DirName; // 生成目录的模块,每月一生
 7 var filenameWithMd5 = MD5( new Date().getTime() ) + '-' + fileName;
 8 var filenameForCloud = fileRename.FileRename(fileName);
 9 // 保存到本地服务器的文件,使用MD5重命名文件
10 // 上传到云存储的文件,使用自定义的模块重命名
11 var targetPath = path.resolve('./' + uploadDirName + '/' + filenameWithMd5);
12 // Save file in our local server:
13 fs.rename(tempPath, targetPath, function(err, data){
14   if( err ){
15     var result = 'error';
16     res.status( result ).send();
17   } else {
18     var result = 'ok';
19     var uploadInfos = { ... }; // AWS的config信息定义在服务端,由模块引入并发送到前端,供JS接口调用:
20     res.status( result ).send( uploadInfos );
21     // Next do Qi Niu Upload ... blah blah blah
22   }
23 });

针对上述代码的几处说明:

a:关于在本地服务器生成目录:

我们的需求是,每月首次触发上传动作时,在服务器创建一只新目录。

该月内的其余上传文件,都存储在这一目录里。

所有的文件会按上传时间,以自然月为目录而分类。

按月创建目录的逻辑,我写了一枚小小模块,如下:

var fs = require('fs');

var _d = new Date();
var _year = _d.getFullYear();
var _month = (_d.getMonth() + 1 < 10)?('0' + (_d.getMonth() + 1)):(_d.getMonth() + 1); // 为整齐,月份都显示为两位数,因此1-9月前面加0
var dir = _year + '-' + _month + '-alex_upload';

if (!fs.existsSync(dir)){
  fs.mkdirSync(dir);
}

exports.DirName = dir; // 输出模块名为DirName

// ============================
// 假设这个文件名为makeDirName.js,则在业务逻辑中引入并应用要这样:
var d_name = require('../routes/makeDirName');
var someName = d_name.DirName; // 输出的模块名在这里被这样引用

b:关于文件重命名:

我们的需求是,存在本地服务器的文件,使用MD5重命名。

上传到云存储的文件,使用时间戳和随机字符串共同重命名。

重命名文件的模块是酱紫写的:

 1 function rename( filename ) { 
 2   var name = ''; 
 3   var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 4   var length = 6; // 随机字符串的长度,暂用6
 5   for(var i = 0; i < length; i++){
 6     name += possible.charAt( Math.floor(Math.random() * possible.length) );
 7   }
 8   var timestamp = new Date().getTime();
 9   name = timestamp + '-' + name + '-' + filename;
10   return name;
11 };
12 
13 exports.FileRename = rename;

c:关于res.status( 200 ).send( data ):

每个请求的response必须Call一下res.end(),

以此来告诉服务器这个请求的header和body都已发送,

并且这个请求已经完成。

如果不告诉服务器,呆萌的服务器是永远不会知道的。

浏览器会一直在请求状态中,标题栏的小圈圈一直在转啊转,

表示请求一直在持续啊持续。

在Call了res.end()之后,res.finished 的值为true,否则是false。

res.send() 会Call res.end(),因此不需重复Call。

3:在前端请求AWS S3

在发送刚才所提到的POST请求之前,

前端先new一个plupload的Uploader,部分代码如下:

 1 var _myUploader = new plupload.Uploader({
 2   runtimes:           'html5,flash,silverlight,html4',
 3   file_data_name:     'file',
 4   container:          _SCOPE.containerId,
 5   browse_button:      _SCOPE.filePickerId,
 6   uptoken_url:        _ELE.fileUptoken.innerHTML,
 7   url:                _ELE.fileLocalSave.innerHTML,
 8   flash_swf_url:      _SCOPE.swfUrl,
 9   silverlight_xap_url:_SCOPE.xapUrl,
10   filters: {
11     max_file_size:    _SCOPE.maxFileSize,
12     mime_types: [
13       {title: 'Image files', extensions: 'jpg,png,gif'},
14       {title: 'Zip files', extensions: 'zip'}
15     ]   
16   }, 
17   init: {...}
18 });

这里的 _SCOPE 和 _ELE 定义在全局作用域,或指定页面模块作用域下。

目的是从服务端接收相关的配置参数,在页面发送请求时调用。

这里遵循了一个高端大气上档次的写码原则,即:

常量参数的配置,

如Domain地址、取token之通信接口、

even 账户的accessKey&accessToken blah blah blah……

都在服务端某指定模块内统一配置。

当前端需要某参数时,由页面渲染res.render() 传递到页面元素HTML属性里,

但是不可以将Key等账户密钥渲染在页面结构里

也可以通过前后端通信将参数传递给前端页面,

例如刚才所述的POST接口里的uploadInfos。

这样做,在一处定义,其余皆调用

当值有更新时,只在定义处更新其值即可。

避免多处赋值,更新时丢三落四陷入混乱。

嗯咳,所有工程师都知道的好么!我说多了……

……继续说上传:

使用Plupload,在其FileUploaded 的回调里,

即可执行向AWS S3发送请求了。

FileUploaded是在Plupload的文件上传成功后才会触发。

前端请求AWS S3的简要方法如下:

(这里的file是从FileUploaded的方法里用getNative获取到的原生file对象)

 1 function doAWSUpload( rename, file, info ) { 
 2   var file_name = file.name,
 3       file_type = file.type,
 4       file_size = file.size;
 5   var bucket = new AWS.S3();
 6   var uniqueName = rename;
 7   bucket.config.update({ // 配置信息,在服务端传来的info里
 8     accessKeyId: info.accessKeyId,
 9     secretAccessKey: info.secretAccessKey
10   }); 
11   bucket.config.region = info.region;
12   var params = { 
13     Bucket: info.bucket, // 账户指定的bucket名
14     Key: uniqueName,
15     ContentType: file_type,
16     Body: file,
ACL: 'public-read', // 设置文件访问权限
17 ServerSideEncryption: info.ServerSideEncryption 18 }; 19 bucket.putObject(params, function(err, data){ // 此账户必须要有putObject的操作权限才能调用 20 if(err){ 21 var errText = ' ' + file_name + ' failed in uploading to AWS! ' + err; 22 _ELE.fileConsole.innerHTML += errText; 23 }else{ 24 var url = 'https://s3.amazonaws.com/' + info.bucket + '/' + uniqueName;26 _ELE.fileConsole.innerHTML += ' AWS upload succeeded! ' + url; 27 } 28 }).on('httpUploadProgress', function(progress){ 29 console.log( 'AWS uploading...', Math.round(progress.loaded / progress.total * 100) ); 30 }); 31 };

执行这个方法的前提是前端页面调用了JS-SDK,

并且,……最重要的是并且:

对应账户在AWS的Console管理后台的相关配置要正确。

最讨厌各种相关配置了,

配来配去一百年才成功一次……

4:AWS的账户在Console管理后台的相关配置

首先注册一枚高大上的AWS账户。

如果你经常在Amazon上买买买,也可以用你的Retail账户。

开通AWS服务,需要验证,其过程要填写Payment账户信息。

我十分Naive的填了自己的Credit Card信息,结果直接被扣掉1刀勒。

吓尿之后,立刻删。

大约因为作为Retail账户时我曾做过快捷支付神马的脑残设置吧。

总之,1美元而已,这已不是重点……

有了一枚飘逸的AWS账户后,登录 https://console.aws.amazon.com

选择S3服务,进来后无视一切,先Create Bucket

点击这个新的Bucket,选择Properties

Permissions里,再选择 “Edit CORS Configuration”,

一个较为典型的CORS Configuration可以长这个样子:

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
 3     <CORSRule>
 4         <AllowedOrigin>http://localhost:3038</AllowedOrigin> //本地测试入口
 5         <AllowedOrigin>http://shaojing.wang</AllowedOrigin> //线上测试入口
 6         <AllowedMethod>PUT</AllowedMethod> //可执行的方法
 7         <AllowedMethod>DELETE</AllowedMethod> //可执行的方法
 8         <MaxAgeSeconds>3000</MaxAgeSeconds>
 9         <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
10         <ExposeHeader>x-amz-request-id</ExposeHeader>
11         <ExposeHeader>x-amz-id-2</ExposeHeader>
12         <AllowedHeader>*</AllowedHeader>
13     </CORSRule>
14 </CORSConfiguration>

这里的CORS Configuration即对跨域请求所做限制,

只有“AllowedOrigin”里指定的端口才能向AWS发出请求,

而只有“AllowedHeader”里指定的端口才能接收请求(访问文件)。

上传成功后,可通过这样的URI访问到文件:

https://s3.amazonaws.com/myBucketName/1452581386878-hPp8Mc-test.png

附:AWS的文档在这里:http://docs.aws.amazon.com/

关于如何在服务端进行AWS S3的上传,下次再写文章分享。

下面该讲什么了……

5:在服务端实现向七牛云存储上传文件

该七牛了。

请八牛、九牛和十牛再耐心等一等。

六牛你不要闹,你已经谢世了好么。

从服务器向七牛云发送请求之前,需要获取授权,

请求授权之前,需要设置账户信息。

设置账户信息之前,你得先有一枚账户。

有了账户就有了AccessKey & SecretKey。

还是刚才讲的,在统一配置参数的模块里,配置好这些Key们的信息,

然后在服务端将发送请求之前,做赋值:

1 var qiniu = require('qiniu');
2 var qnConf = require('../config/qiniu_config');
3 
4 /* Prepare Qiniu config, we make Qiniu upload in Node Server not in browser*/
5 qiniu.conf.ACCESS_KEY = qnConf.QiniuConfig.ACCESS_KEY;
6 qiniu.conf.SECRET_KEY = qnConf.QiniuConfig.SECRET_KEY;

赋值之后,就可以开心的去请求upToken了!

写一只孤零零的单独小模块,用来生成upToken,代码长这样:

1 var qiniu = require('qiniu');
2 
3 function uptoken(bucketname) { // 指定一个bucket传名字进来
4   var putPolicy = new qiniu.rs.PutPolicy(bucketname);
5   return putPolicy.token();
6 }
7 
8 exports.Uptoken = uptoken;

拿到upToken就可以华丽丽丽丽的开始上传了。

可以在刚才本地存储的POST请求成功后的回调里做。

代码就像酱紫:

 1       // Do Qiniu upload in here:
 2       var targetPath = path.resolve('./' + uploadDirName + '/' + filenameWithMd5); //接刚才的POST里的处理
 3       var qiniu_uptoken = generateUptoken.Uptoken(qnConf.QiniuConfig.Bucket_Name);
 4       var extra = null; // 放额外信息,先写null
 5       fs.readFile(targetPath, function(error, data){
 6         qiniu.io.put(qiniu_uptoken, uploadDirName + '/' + filenameForCloud, data, extra, function(err, ret){
 7           if(err){
 8             console.log('Something is wrong with Qiniu upload! ', err);
 9           }else{
10             console.log('qiniu: ', ret);
11             console.log('Qiniu URL = ', qnConf.QiniuConfig.Domain + uploadDirName + '/' + filenameForCloud); //手动拼结果URL
12           }
13         });
14       });

至此,七牛的上传也OK鸟!

撒花~~乐队起~~

5:后记

本文所述内容,仅限于最主要最基本的逻辑,

未涉及页面的交互和部分异常响应的处理。

仅供参考。表扔鸡蛋。

更多相关文章
  • 我们擅长亚马逊的EC2云计算系统, 我们运维着EC2上不同地区,包括欧盟 .美国.日本和新加坡的许多客户(我们正等待第一个使用EC2巴西地区的客户).我们经常被问到许多关于EC2的特点,所以在这里我们对于亚马逊AWS的 看法做一个的简单总结.还有,我们公司是和亚马逊合作的,我们可以使中国客户得到更好 ...
  • 七牛是不错的云存储产品,特别是有免费的配额可供使用,存点小文件或者博客的插图什么的还是不错的.以下介绍在自己的Web应用中上传文件到七牛的方法. 基本思想 当我们想把本地的文件通过浏览器上传到自己的七牛云存储空间上时,就有两种思路 将文件直接上传到服务端,再由服务端将文件传输至七牛 向服务端请求七牛 ...
  •     最近一直想建自己的网站,心里很纠结.作为一个技术人,国内的虚拟主机给的权限远远不能满足我的需求.独立的服务器,买了托管的话,第一年的费用至少要一万五千元左右,租用的话也要至少六七千大元.    后来开始关注云计算,结果发现国内根本没有成功可用的商业云计算平台.只好向外看了.感谢 鲜橙加冰 对 ...
  •  亚马逊上一个读者的评论 今天浏览亚马逊<Java程序员,上班那点事儿>的销售页面,http://www.amazon.cn/Java%E7%A8%8B%E5%BA%8F%E5%91%98-%E4%B8%8A%E7%8F%AD%E9%82%A3%E7%82%B9%E4%BA%8B%E5% ...
  • 本书比较详细地讲亚马逊从创业开始到2012年年底的主要的历史.当然是以贝佐斯为主角,另外也没涉及太多的商业数据和贝佐斯的决策过程(这当然是本书缺陷,对商业传记类图书也不能要求太高). 贝佐斯脾气暴躁,对员工和合作伙伴刻薄.要求员工要超时工作,努力工作,优质工作(创业初期可以三选二,后来就必须三项全选 ...
  • C#使用七牛云存储上传下载文件、自定义回调
    项目需要将音视频文件上传服务器,考虑并发要求高,通过七牛来实现. 做了一个简易的压力测试,同时上传多个文件,七牛自己应该有队列处理并发请求,我无论同时提交多少个文件,七牛是批量一个个排队处理了. 一个1.5MB的文件,上传时间大概2-3秒,感觉不错.  直接上代码 ; ; ; i < Conc ...
  • 亚马逊编辑推荐在一名专业的游戏开发者指导下,你将开发出两款完整的HTML5游戏:一款与<愤怒的小鸟>类似,基于Box2d物理引擎的策略益智类游戏和一个包括单位.建筑.路径导航.人工智能.多玩家对战模式的即时战略(RTS)游戏.开发游戏的过程中,你将学到以下知识:在游戏中引入Box2d物理 ...
  • VMwareSphereESXi上传系统镜像
    VMware SphereESXi上传系统镜像 打开右侧[摘要]选项卡 在[资源]中选择存储器中的存储,右键[浏览数据库存储] 选择工具栏[创建文件夹]图标,命名后保存 这样随后找到存储设备,浏览刚才自定义命名的文件夹选中上传的iso镜像文件.就可以安装了.
一周排行
  • 用传统的NAT方式替代H3C的DNS-MAP功能
          相信大家在做链路均衡相关的项目中,往往会碰到用户有如下要求:对于内网服务器向外 ...
  • 强制删除AD域控制器
    活动目录域服务的卸载是将DC降级为独立服务器或成员服务器的过程.在删除活动目录之前,为了防 ...
  • 久石让-<<天空之城>>传说在那天上 在天际的深处 有座美丽雷泊地 隐隐的飘浮云中央 仍未揭露它真相 又未找到它方向 愿能有日向天空飞去 找出那探访路向 探访天际的家乡 云是我家乡 寻觅快乐温 ...
  • 我的网站网址www.apple2.cn  苹果科技网站写一下我建设这个网站的初衷吧,我希望建设的一个具有创新性的网站,网友能从里面在感受科技的时候能学到创新的精神,这是最重要的,好不好,由大家来评价,欢迎大家多提宝贵 ...
  • ASPNET_AJAX_1_0_Beta_WebSite_including_Value-add.zip2.不要把zip包解开,将它们复制到您的"My Documents\Visual Studio 200 ...
  •     众所周知,对于冯·诺依曼体系结构的现代计算机而言,主要的组成部分是:cpu.内存和I/O.作为电子元器件,cpu和内存识别二进制中的1和0都是通过电压的有无来实现的,因此电压在有无之间变换频率的快慢或者说这些 ...
  •  网关和IP必须设置在同一个网段吗?       网关和IP必须设置在同一个网段,我一直是这样认为的,但是有一天,我在一个学校的办公室,看到一台电脑: 网络设置如下: IP:172.16.20.8 子网掩码:255. ...
  • [我们是一家游戏开发公司,我所在的部门是游戏工具部,人数近百.在动员之前每月提交的创新文章一篇或两篇,经这次动员之后,每月有十篇左右,而且质量也有较大的提高.本人认为这不仅仅适用于内部的创新动员,也是一种价值观的表达 ...
  • 每扇区2048字节的U盘乱码的数据恢复       一个U盘,FAT32分区,显示的是乱码,远程看对方的U盘参数,发现一个比较怪的现象:每扇区字节数是2048字节(U盘量产时可能是以光盘形式形成的),对方传的镜像给我 ...
  • 最近FC再给我们分享以弗所书,关于父母和孩子的.学习颇多. 一.父母的角色只有我们自己可以承担.我们不要随便与孩子成为朋友. 二.岁, 家里要有规矩 1. 做完作业再做其他事情,看电视啥的都不行.现在60多岁仍 ...