使用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文件用来测试我们的上传系统。
  • 代码如下



    
    uploadfile


    

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

你可能感兴趣的:(使用express 中间件multer上传文件)