Node07 - 文件上传

1、from表单中属性  =>  enctype  

    参数1:application/x-www-form-urlencoded  =>  只能上传值

    参数2:multipart/form-data  => multipart: 分成多个部分,有可能上传多个文件,form-data:上传的是真正的表单数据,不仅仅是指一些值

    参数3:text/plain  =>   纯文本(少见)

2、bodyParser  =>  只能处理 urlencoded 数据

    from表单中 :application/x-www-form-urlencoded(有效),multipart/form-data(无效)

3、Node处理(multipart/form-data 表单)的中间件  =>  multer 

  (01)、下载引用  =>  cnpm install multer

  (02)、使用方法  =>

//nodejs 代码
const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');

//需要先定义一个multer对象,multer里有好多方法,如any,single
//single =>  指定某个上传文件
//any  =>  指上传所有文件
// dest =>  指定文件的上传路劲
var objMulter = multer({dest: './www/upload/'});
var server = express();

//指定上传input-file-name=f1 的文件
//server.use(objMulter.single('f1'));
server.use(objMulter.any());

server.post('/', function (req, res) {
    //req。body: 上传的值
    //req.files:  上传的文件
    console.log(req.files);
});
server.listen(8080);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
        文件 <input type="file" name="f1"> <br> <br>
        <input type="submit" value="上传">
    </form></body>
</html>
<!--返回结果-->
    [ { fieldname: 'f1', <!--表单叫什么-->
    originalname: '1号-马擎.jpg',<!--原始文件名-->
    encoding: '7bit',<!--编码-->
    mimetype: 'image/jpeg',<!--文件类型。(很容易欺骗的)-->
    <!--保存在磁盘中,占用内存。-->
    buffer: <Buffer ff d8 ff e1 05 16 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 09 00 0f 01 02 00 06 00 00 00 7a 00 00 00 10 01 02 00 0f 00 00 00 80 00 00 00 1a 01 05 00 ... >,
        size: 4272195 } ]<!--大小-->

    (03)、当   var objMulter = multer();加入指定文件上传路径的时候返回数据发生变化 ,dest:代表指定文件上传位置  =>   var objMulter = multer({dest: './www/upload/'});  

<!--返回结果-->
    [ { fieldname: 'f1',
    originalname: '1号-马擎.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: './www/upload/',<!--  -->
    filename: 'ed8c4abdc9216167741f27b6f78f17c2',<!-- 上传的文件 -->
    path: 'www\\upload\\ed8c4abdc9216167741f27b6f78f17c2',<!-- 上传文件地址 -->
    size: 4272195 } ]

4、上传文件名更改  =>  fs.rename()

     参数1:原来文件名

    参数2:更改文件名

    参数3:异步回调函数

const fs = require('fs');
fs.rename('a.txt', 'b.txt', function(err){
    console.log(err);
});

5、解析文件路径  =>  path.parse(文件路径)

    (01)、dir  =>  文件路径

    (02)、base  =>  文件名部分

    (03)、ext  =>  文件扩展名

const path = require('path');
var str = 'C:\\Users\\U\\Desktop\\CZ-node\\node15-fileUplode\\file_uplode.html';
var obj = path.parse(str);
console.log(obj);
<!--返回结果-->
    { root: 'C:\\',<!--  -->
    dir: 'C:\\Users\\U\\Desktop\\CZ-node\\node15-fileUplode',<!-- 文件路径 -->
    base: 'file_uplode.html',<!-- 文件名部分 -->
    ext: '.html',<!-- 扩展名 -->
    name: 'file_uplode' }<!-- 文件名不包含扩展名 -->

 6、文件上传并且修改上传文件的后缀名(原因:上传的文件没有后缀名),更改过后文件可以使用。

    实例:=>   

//nodejs 代码
const express = require('express');
const bodyParser = require('body-parser');
const multer = require('multer');
const fs = require('fs');
const pathLib = require('path');
//需要先定义一个multer对象,multer里有好多方法,如any,single
//single =>  指定某个上传文件
//any  =>  指上传所有文件
// dest =>  指定文件的上传路劲
var objMulter = multer({dest: './www/upload/'});
var server = express();

//指定上传input-file-name=f1 的文件
//server.use(objMulter.single('f1'));
server.use(objMulter.any());

server.post('/', function (req, res) {
    //req。body: 上传的值
    //req.files:  上传的文件
    //req.files[0].path:文件路径
    //pathLib.parse(req.files[0].originalname).ext:文件扩展名
    var newName = req.files[0].path + pathLib.parse(req.files[0].originalname).ext;
    fs.rename(req.files[0].path, newName, function(err){
        if (err)
            res.send('上传失败');
        else
            res.send('上传成功');
    });
});

server.listen(8080);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
        文件 <input type="file" name="f1"> <br> <br>
        <input type="submit" value="上传">
    </form>
</body>
</html>

 

posted @ 2017-12-12 15:22  FallenLunatic  阅读(268)  评论(0编辑  收藏  举报