使用express 中间件multer上传文件

前言

• 上传文件是很常见的需求，我们的express当然少不了这个功能。
• multer是最常见的express上传中间件。下面介绍使用multer实现文件上传处理操作。

简单介绍

习惯简单看一下官方文档，然后直接撸代码。好，先看一下官方文档介绍。见地址(https://github.com/expressjs/multer)。直接把基本的使用例子copy到自己到编辑器中。然后加以修改。

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

// 上传单文件
app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

// 上传多文件
app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

// 单文件和多文件
var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
})

app.get('/', function (req, res, next) {
  res.sendfile('form.html');
})

app.listen(3000, function () {
    console.log('监听3000端口成功');
})

我把官方例子copy之后就只是加了一个启动服务器和请求文件的代码。很简单是吧～～。

• 然后在代码目录下面新建一个form.html文件用来测试我们的上传系统。
• 代码如下

    
    


    
multer uplpad file
    

        
        提交
    

• 需要注意的是上面代码的input的name要和后端如果是单文件就要和单文件的name一致。如果是多文件就要和多文件的name一致。你懂的。
• 然后启动node app

实战练习

• 单文件修改文件名

经过上面的练习，我们会发现上传单文件之后，文件是存在服务器upload目录下面，但是文件名是一串看不懂的字符串。所以我们需要把文件名改为我们需要的名字

• 查看文挡我们采用diskStorage

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '/tmp/my-uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

var upload = multer({ storage: storage })

这样就可以通过filename改文件名了这里我文件名没有后缀，我给文件名把后缀加上。

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now() + file.originalname.match('\.*'));
    }
})

上传多文件

• 给input标签添加multiple属性

然后就可以上传多时候用shift或者control选中多张进行上传了。如果不支持这个属性，就需要操作dom生成多个input，获取文件名可以使用jquery获取文件input对像，然后再获取他的name即可。

选中多个文件，统一上传

参考(http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/)这段代码，让我有了思路，只需要把每次选择文件的信息保留下来。

funGetFiles: function(e) {
    this.funDragHover(e);
        
    var files = e.target.files || e.dataTransfer.files;

    this.fileFilter = this.fileFilter.concat(this.filter(files));
    this.funDealFiles();
    return this;
}

这样就可以了，然后就可以进行处理，由你定，现实缩略图的什么的，或者删除。

• 删除。就是可以把文件的下标存到标签中，然后就可以根据下标找到队列里相应的文件进行删除。
• 缩略图。使用html5的FileReader对象

var reader = new FileReader();
reader.onload = function (e) {
    var thumbnail ＝ e.target.result;
}

总结

• 以需求导向直接开始写代码,看代码。不懂再去查文档。效率更高

参考链接

• 我的源代码地址：https://github.com/suyunxue/demo/tree/master/multerUploadFile
• multer官方文档(https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md)
• 参考博文(http://www.cnblogs.com/chyingp/p/express-multer-file-upload.html)
• 参考博文( http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/)
• 参考代码(http://www.zhangxinxu.com/study/201109/html5-file-image-ajax-upload.html)
• MDNFileReader文档，查看例子(https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)
• 读取文件api(http://javascript.ruanyifeng.com/htmlapi/file.html)

转载于:https://www.cnblogs.com/sufubo/p/7259972.html