使用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文件用来测试我们的上传系统。
  • 代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>uploadfile</title>
</head>
<body>
    <h1>multer uplpad file</h1>
    <form action="/profile" method="post" enctype="multipart/form-data">
        <input type="file" name="avatar">
        <button>提交</button>
    </form>
</body>
</html>
  • 需要注意的是上面代码的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属性
<input type="file" multiple name="photos"/>

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

选中多个文件，统一上传

参考(http://www.zhangxinxu.com/wordpress/2011/09/基于html5的可预览多图片ajax上传/)这段代码，让我有了思路，只需要把每次选择文件的信息保留下来。

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;
}

总结

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

参考链接

posted @ 2017-07-30 18:31  风烟  阅读(282)  评论(0)  编辑  收藏  举报