nodejs之express框架二（文件上传）

一，新建form表单提交的html页面（form.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <h2>单图上传</h2>
        <input type="file" name="logo">
        <input type="submit" value="提交">
    </form>
</body>
</html>

二，新建路由获取html文件

app.get('/form', function(req, res) {
    var form = fs.readFileSync('./form.html', { encoding: "utf8" });
    res.send(form);
});

三、下载并引入multer表单文件上传库

地址：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

$ npm install --save multer

var multer = require('multer');

四、

//创建文件上传放置路径

var createFolder = function(folder) {
    try {
        fs.accessSync(folder);
    } catch (e) {
        fs.mkdirSync(folder);
    }
};

var uploadFolder = './upload/';

createFolder(uploadFolder);


//DiskStorage磁盘存储引擎可以让你控制文件的存储。

var storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, uploadFolder);
    },
    filename: function(req, file, cb) {
        cb(null, file.originalname);
    }
});

// Multer 接受一个 options 对象，其中最基本的是 dest 属性，这将告诉 Multer 将上传文件保存在 哪。如果你省略 options 对象，这些文件将保存在内存中，永远不会写入磁盘。

//为了避免命名冲突，Multer 会修改上传的文件名。这个重命名功能可以根据您的需要定制。


var upload = multer({ storage: storage });

ps完整版解析翻译

let express = require('express');
let bodyParser = require('body-parser')
let fs = require('fs');

let app = express();
var multer = require('multer');

// 创建目录的函数
var createFolder = function (folder) {
    try {
        //判断目录是否存在,使用同步,异步不行
        //目录不存在会抛出异常
        fs.accessSync(folder);
    } catch (e) {
        // 抛出异常后创建目录,同步创建
        fs.mkdirSync(folder);
    }
};
// 文件目录的字符串(相对路径)
var uploadFolder = './upload/';
//调用目录创建函数 ==>目录创建完成
createFolder(uploadFolder);

// 创建一个storage对象
//The disk storage engine gives you full control on storing files to disk.
// 翻译的意思是:这个硬盘存储引擎可以让你完全掌控把文件存储到硬盘==>意思是:按照你想要的方式存储上传来的文件
var storage = multer.diskStorage({
    // 设置存放位置
    destination: function (req, file, cb) {
        cb(null, uploadFolder);
    },
    // 设置文件名称
    filename: function (req, file, cb) {
        cb(null, file.originalname);
    }
});
// 使用storage
var upload = multer({
    storage: storage
});
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
    extended: false
}))

// parse application/json
app.use(bodyParser.json())

app.get('/form', (req, res) => {
    // 这里的话需要用同步读取文件,异步的话fileData将在响应前得不到内容
    let fileData = fs.readFileSync('./pages/form.html', {
        encoding: 'utf8'
    });
    res.send(fileData);
})
// app.post(path, callback [, callback ...])可以放多个回调函数,意思是你可以放一下中间件
//upload.single('logo') ==>single代表单文件上传 和name属性保持一致 <input type="file" name="logo">
//upload.single('avatar') // 单文件上传
//upload.array('photos', 12) //文本上传
//upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])//多文件上传
app.post('/upload', upload.single('logo'), (req, res) => {
    console.dir(req.file);
    res.send({
        'ret_code': 0
    });
})
app.listen(3000, '127.0.0.1', () => {
    console.log("started");
})

nodejs之express框架二（文件上传）

猜你喜欢