nodejs --- 上傳文件並保存到磁盤

本文轉載自查看原文 2017-07-06 23:35 1255 nodejs

先復習下整個請求的過程

const express = require('express');
const static = require('express-static');
const cookieParser = require('cookie-parser');
const cookieSession = require('cookie-session');
const bodyParser = require('body-parser');
const multer = require('multer');
const ejs = require('ejs');
const jade = require('jade');

const server = express();

server.listen(8999);

// 解析cookie
server.use(cookieParser('dfadfasdfa'));

// 解析session
let arr = [];
for(let i = 0; i < 100000; i++) {
    arr.push('key_' + Math.random());
}

server.use(cookieSession({name: 'jason_name', keys: arr, maxAge: 20*3600*1000}));

// post數據
server.use(bodyParser.urlencoded({extended: false}));
server.use(multer({dest: './www/upload'}).any());

// 用戶請求
server.use('/', (req, res, next) => {
    console.log(req.query, req.body, req.files, req.cookie, req.session);
});

server.use(static('./www'));

測試下能不能上傳

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
// fs 可以用來添加上傳文件的擴展名(重命名)
const fs = require('fs');
const pathLib = require('path');

const server = express();


// 創建一個上傳文件對象
// let objMulter = multer({dest: './www/upload'});

server.use(bodyParser.urlencoded({extended: false}));
// server.use(objMulter.any());

server.post('/', (req, res) => {
    console.log('req.body==>',req.body);
    // 當請求是 enctype=application/x-www-form-urlencoded 
    // req.body==> { f1: 'mmexport1485905379121.jpg' }
    // 當請求是 multertype/form-type
    // req.body==> {}
    // console.log('req.files==>', req.files);
});

server.listen(8999);

上傳的表單文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上傳</title>
</head>
<body>
    <form action="http://localhost:8999" method="post" enctype="application/x-www-form-urlencoded">
    <!-- <form action="http://localhost:8999" method="post" enctype="multipart/form-data"> -->
    <!-- <form action="http://localhost:8999" method="post" enctype="text/plain"> -->
        文件： <input type="file" name="f1"> <br/>
        <input type="submit" value="上傳">
    </form>   
</body>
</html>

這是因為body-parser 只能處理application/x-www-form-urlencoded

文件上傳需要使用 multer 模塊用來處理 multipart/form-data

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
// fs 可以用來添加上傳文件的擴展名(重命名)
const fs = require('fs');
const pathLib = require('path');

const server = express();


// 創建一個上傳文件對象
let objMulter = multer({dest: './www/upload'});

// server.use(bodyParser.urlencoded({extended: false}));
server.use(objMulter.any());

server.post('/', (req, res) => {
    // console.log('req.body==>',req.body);
    console.log('req.files==>', req.files);
     // req.files==> [ { fieldname: 'f1',
     //    originalname: 'IMG_20170125_212945.jpg',
     //    encoding: '7bit',
     //    mimetype: 'image/jpeg',
     //    destination: './www/upload',
     //    filename: 'fa0b73da8bdbcb36e9480e9869c0a2b7',
     //    path: 'www\\upload\\fa0b73da8bdbcb36e9480e9869c0a2b7',
     //    size: 226929 } ]
     
});

server.listen(8999);

這個時候你會發現文件上傳了，但是文件名沒有擴展名

fs中重名的函數rename

fs.rename('a.txt', 'b.txt', (err) => {

console.log(err);

});

獲取擴展名的插件 path 可以小小的測試下這個node中的path插件

const path = require('path');

let str = 'c:\\wamp\\www\\a.html';

let obj = path.parse(str);

console.log(obj);

// {
//   root: 'c:\\',
//   dir: 'c:\\wamp\\www',
//   base: 'a.html',
//   ext: '.html',
//   name: 'a'
// }

// base 文件名部分

// ext 擴展名部分

// dir 文件路徑（目錄）

// name 文件名（不包含擴展名）

然后講path插件添加進文件

const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
// fs 可以用來添加上傳文件的擴展名(重命名)
const fs = require('fs');
const pathLib = require('path');

const server = express();


// 創建一個上傳文件對象
let objMulter = multer({dest: './www/upload'});

// server.use(bodyParser.urlencoded({extended: false}));
server.use(objMulter.any());

server.post('/', (req, res) => {
    // console.log('req.body==>',req.body);
    console.log('req.files==>', req.files);
     // req.files==> [ { fieldname: 'f1',
     //    originalname: 'IMG_20170125_212945.jpg',
     //    encoding: '7bit',
     //    mimetype: 'image/jpeg',
     //    destination: './www/upload',
     //    filename: 'fa0b73da8bdbcb36e9480e9869c0a2b7',
     //    path: 'www\\upload\\fa0b73da8bdbcb36e9480e9869c0a2b7',
     //    size: 226929 } ]
    //1.獲取原始的擴展名  2.重命名臨時文件
    let newName = req.files[0].path + pathLib.parse(req.files[0].originalname).ext
    fs.rename(req.files[0].path, newName, (err) => {
        if(err) {
            console.log('重命名失敗');
        }else {
            console.log('命名成功');
        }
    });
});

//     req.files==> [ { fieldname: 'f1',
//     originalname: 'IMG_20170125_212945.jpg',
//     encoding: '7bit',
//     mimetype: 'image/jpeg',
//     destination: './www/upload',
//     filename: 'bb031c31a1016648703a0d54cc93f674',
//     path: 'www\\upload\\bb031c31a1016648703a0d54cc93f674',
//     size: 226929 } ]
// 命名成功

server.listen(8999);

到此，文件成功的保存到磁盤中，並且大小一致

總結：

body-parser 解析post數據 application/x-www-form-urlencoded

multer 解析post文件 multipart/form-data

let obj = multer({dest: '上傳路徑'});

server.use(obj.any());

server.use( (req, res) => {

req.files[0].originalname

req.files[0].path

});

fs.rename(老名字，新名字, (err) => {

});

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Odoo13_上傳文件並指定保存到位置 nodejs下載圖片到本地，根據百度圖片查找相應的圖片，通過nodejs保存到本地文件夾 URL文件保存到本地 java 文件保存到本地 thinkphp表單上傳文件並將文件路徑保存到數據庫中 idea上傳的圖片保存到了/target/upload文件夾下，前面頁面訪問此資源怎么訪問呢？自動將本地文件保存到GitHub 把Unity的日志保存到文件中 Nodejs express 文件上傳 NodeJs之文件上傳