在开发自己的博客引擎的过程中,遇到的第一个问题就是如何实现图片的上传。

如果对express中的app.post('/', function (req, res)) 方法熟悉的话,方法中的req.files已经代表的是上传的文件,打印出来之后可以看到文件的一系列属性,比如说通过上传的路由,重命名之后的名称,存放的路径,文件的大小等等:

{ 
    size: 74643,
    path: '/tmp/8ef9c52abe857867fd0a4e9a819d1876',
    name: 'edge.png',
    type: 'image/png',
    hash: false,
    lastModifiedDate: Thu Aug 09 2012 20:07:51 GMT-0700 (PDT),
    _writeStream: 
    { 
        path: '/tmp/8ef9c52abe857867fd0a4e9a819d1876',
        fd: 13,
        writable: false,
        flags: 'w',
        encoding: 'binary',
        mode: 438,
        bytesWritten: 74643,
        busy: false,
        _queue: [],
        _open: [Function],
        drainable: true },
        length: [Getter],
        filename: [Getter],
        mime: [Getter]
    }
}

但有几个非常常规的功能无法通过这些个参数实现的,比如

如何判断上传成功? 如何显示上传进度? 如何在上传之前限制图片的大小和分辨率? 如何重命名图片并且另取存放路径? 并且解决以上的几个问题靠原生的框架是不够的,于是想到了 Modules,找到了star数比较多的node-formidable,按照tutorial,在app.post中的贴上了示例代码:

var formidable = require('formidable');
app.post('/upload', function (req, res) {
    var form = new formidable.IncomingForm({
        form.keepExtensions = false; //keep .jpg/.png
        form.uploadDir = "upload/"; //upload path
    });
    form.parse(req, function(err, fields, files) {
        console.log("parse!");
    });
    //bind event handler
    form.on("progress", function (err) {
    })
    form.on("complete", function (err) {
    })  
})

但运行之后,发现所有的事件回调并没有被触发(因为所有handler中的 console.log都没有被打印出来)。 可图片却正常上传了! ,或许是 我们使用formidable的方式不对,忽略了什么吧。

Google了几篇关于formidable使用的文章。确定我们使用formidable的方式是没有问题的。于是尝试把问题定位到是不是这个组件在整体架构中的问题,比如和express的组件有了冲突?

首先看看是不是express的问题,先从和上传文件相关的 req.files 入手。果然,在关于 req.filesAPI中看到,其实 bodyParser()node-formidable 模块其实早已经被整合在一起,甚至参数都已经可以通用:

The bodyParser() middleware utilizes the node-formidable module internally, and accepts the same options. An example of this is the keepExtensions formidable option, defaulting to false which in this case gives you the filename “/tmp/8ef9c52abe857867fd0a4e9a819d1876” void of the “.png” extension. To enable this, and others you may pass them to bodyParser():

也就是说,我们在初始化bodyParser()的时候就可以设置有关上传的一些参数了,比如可以限制上传文件的大小,改变上传路径,自动重命名后保留文件后缀

app.use(express.bodyParser({
        uploadDir: "media/upload/",
        keepExtensions: true,
        limit: 10000000
})); 

非常好!但是仍然不够,只有给上传的不同阶段绑定不同的处理函数,这样才能更灵活的控制。 这次去express在github上托管的代码看看,看看在issue中有没有相同问题的人——果然是有的,比如这个问题:

Is there an event I can listen to to get the progress of an file upload? Apologies for posting this as an issue.

但是express的作者的回答差点让我石化了:

not currently no. modern browsers and moving on in the future the client-side can report progress fine so I feel like the average case wont really need this, maybe even some do now, but that being said you can still disable the multipart support and use formidable directly for the events. Maybe sometime I’ll add some event handlers but that wouldn’t really be very middleware-like so it would be kinda awkward I think.

他认为现代浏览器在不远的将来就会有报告上传文件进度的功能,所以他反而删除了?但万幸的是他告诉我们如果真的有这个需求的话,可以在禁用multipart这个中间件(middleware)的同时,使用formidable。于是我尝试这么做:

app.disable("multipart");

但是没有起任何作用。 继续按图索骥,考虑到multipart应该算作是一个属于connect的中间件,我们来到了multipart的 官方文档,找到了关于它的说明,更关键的说关于初始化时option的说明:

The options passed are merged with formidable’s IncomingForm object, allowing you to configure the upload directory, size limits, etc. For example if you wish to change the upload dir do the following.

更关键的是关于它 defer 这个参数的说明:

defer defers processing and exposes the Formidable form object as req.form. next() is called without waiting for the form’s “end” event. This option is useful if you need to bind to the “progress” event, for example.

一切豁然开朗了!只要开启defer这个参数,就可以开启关于各种上传事件的绑定。不多说了,展示完整的代码吧:

app.configure(function () {
    app.use(express.bodyParser({
          keepExtensions: true,
          limit: 10000000, // 10M limit
          defer: true  //enable event            
    }));
})

app.post('/upload', function (req, res) {
    //bind event handler
    req.form.on('progress', function(bytesReceived, bytesExpected) {

    });
    req.form.on('end', function() {
        console.log(req.files);
        res.send("done");
    });
})

所有的事件列表和事件的参数列表都可以参照 node-formidable 的文档,在这里就不多赘述了。 最后回答文章开头的那几个问题:

问:如何限制图片大小

if(req.files.image.size > 307200) // 300 * 1024
{
    msg += 'File size no accepted. Max: 300k;
}

问:如何显示上传进度

req.form.on('progress', function(bytesReceived, bytesExpected) {
    console.log(((bytesReceived / bytesExpected)*100) + "% uploaded");
});

问:如何修改文件名

var fs = require('fs');
fs.renameSync(req.files.image.path, 'public/files/img' + new_name);

React + Redux 性能优化(二)工具篇: Immutablejs

建议在阅读完上一篇[React + Redux 性能优化(一):理论篇](http://qingbob.com/redux-performance-01-basic/)之后再开始本文的旅程,本文的很多概念和结论,都在上篇做了详细的讲解这会是一篇长文,我们首先会讨论使用 Im...… Continue reading

JavaScript 奇怪事件簿

发布于 2018年02月22日