NodeJs之文件上传

NodeJs之文件上传

一,介绍与需求

1.1,介绍

1,multer模块

multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用，只支持表单MIME编码为multipart/form-data类型的数据请求.

2,fs模块

fs模块用于对系统文件及目录进行读写操作。

1.2,需求

上传并操作文件与文件目录

二,配置实现

2.1,multer模块

第一步:安装multer模块

 cnpm install multer --save

第二步:引入multer模块，构造multer对象: multer(opt)

opt是个key-value对象，包含属性dest/storage,fileFilter,limits.分表表示文件的存储位置/方式，文件过滤，文件大小限制.如下：

 var moment = require("moment");
 var express = require("express");
 var multer = require('multer');
 var storage = multer.diskStorage({
   //文件存储路径
     destination: function (req, file, cb) {
         cb(null, path.join(__dirname, "/../uploads/temps"));
     },
    //修改上传文件的名字
    //file 是个文件对象 ,fieldname对应在客户端的name属性
    //存储的文件需要自己加上文件的后缀，multer并不会自动添加
    //这里直接忽略文件的后缀.
     filename: function (req, file, cb) {
         var date = new Date();
         cb(null, moment().format("YYYYMMDDhhmmss") + file.originalname);
     }
 });
 let objMulter = multer({storage : storage });

如果初始化multer时候没有指定dest或者storage，上传的文件将保存在内存中，永远不会写入到磁盘中，在storage中如果没有指定destination值，那么上传的文件将存储在系统默认的临时文件夹.

 multer关联的文件信息:

 filedname   : 在form表单中指定的name属性值
 orginalname : 原始文件名
 encoding    : 文件编码方式
 mimetype    : 多媒体类型
 size        : 文件大小，单位b
 destination : 文件上传后存储在服务端的路径
 filename    : 文件在服务端的命名
 path        : 文件在服务端的完整路径
 buffer      : 文件二进制数据

 ps:其中destination,filename和path只有在指定storage属性时候有效.而buffer只有文件在内存中存储时候有效.

multer同时提供了single/array/fields/any方法用于对接受文件数的控制.

1. single(fieldname) 接收单个文件，通过req.file访问该文件
2. array(fieldnaem,[maxcount]) 接收多个文件,通过req.files数组方法文件.maxcount指定接收文件最大数.
3. fields(fields) 接受指定fieldname的文件,fieldname由客户端决定，通过req.files数组方法
4. any 接收所有文件上传,通过req.files访问文件

2.2,fs模块

第一步:安装fs模块,也可直接引用,node默认集成

 cnpm install fs --save//项目目录安装
 var fs = require("fs");//直接引入文件系统模块

第二步:介绍fs模块的方法

 var fs = require('fs'); // 载入fs模块

1,删除指定文件:fs.unlink(path,callback)

path参数为该文件的绝对物理路径，callback回调参数当中只有一个错误信息参数err，一般在该文件不存在或者删除文件失败时触发调用。

 fs.unlink('/tmp/234.txt', function(err) {
     if (err) {
         throw err;
     }
     console.log('成功删除了 /tmp/234.txt');
 });

2,读取文件:fs.readFile(filename,[option],callback)

参数说明：

• • filename String 文件名
  • option Object
    • encoding String |null default=null
    • flag String default='r'
  • callback Function

path参数为该文件的绝对物理路径，其中options参数可选，可以传入编码格式，如读取文本文件时，可传入'utf8',若不指定编码格式，则默认输出读取的文件内容为Buffer形式，故一般都会传入该参数。callback回调参数当中有两个参数err和data，其中err为错误信息参数，一般在在文件不存在或者读取文件失败时触发调用，data为文件内容。

 fs.readFile('./tmp/test.txt','utf-8'function(err, data) { 
 // 读取文件失败/错误 
 if (err) { 
 throw err; 
  } 
 // 读取文件成功 
  console.log(data); 
 });

3,写入文件:fs.writeFile(filename,data,[options],callback)，追加写入：fs.appendFile(filename,data[,options],callback)

filename参数为该文件的绝对物理路径，data为需要写入该文件当中的数据内容，其中options参数可选，可以传入编码格式，若不传则默认为utf8。callback回调参数当中只有一个错误信息参数err，一般在写入失败时触发调用。

 // 写入文件内容（如果文件不存在会创建一个文件）
 // 传递了追加参数 { 'flag': 'a' }
 fs.writeFile('./test2.txt', 'test test', { 'flag': 'a' }, function(err) {
     if (err) {
         throw err;
     }

     console.log('Saved.');

     // 写入成功后读取测试
     fs.readFile('./test2.txt', 'utf-8', function(err, data) {
         if (err) {
             throw err;
         }
         console.log(data);
     });
 });

flag传值，r代表读取文件，w代表写文件，a代表追加。

 // 追加写入
 fs.appendFile("2.txt","我是追加的字符",function (err) {
     if(err){
       return  console.log(err);
     }else {
         console.log("追加成功");
     }
 })

4,检测文件是否存在:fs.exists(path,callback)

path参数传入该文件的绝对物理路径，该callback回调函数有个参数exists。exists为一个文件状态对象，是否存在。

 var dest_Dir = path.join(__dirname.replace("routes", ""), "uploads", destDir);
 fs.exists(dest_Dir, function (exists) {
         if (exists) {
          //存在
         }
         else {

         }
     });

5,移动或重命名指定文件:fs.rename(oldPath,newPath,callback)

oldPath参数为该文件原来的路径，newPath参数为该文件移动或重命名之后的路径，这两个参数都必须能传入文件完整的绝对物理路径。callback回调参数当中只有一个错误信息参数，一般在oldPath当中指定的文件不存在或者该操作失败时触发调用。

  fs.rename(sourceFile, destPath, function (err) {
                 res.status(200).json({
                     httpCode: 200,
                     message: '上传成功',
                     data: {
                         "fileurl": fileurl
                     },
                 });
 });

6,创建一个目录文件夹:fs.mkdir(path[,model],callback)

path为该目录的绝对物理路径，callback回调函数当中也只有一个错误信息参数，一般在目录创建失败时触发调用。

  fs.mkdir(dest_Dir, 0777, function (err) {
                 if (err) {
                     res.status(500).json({

                 } else {
                   //创建目录成功,上传文件
                     fs.rename(sourceFile, destPath, function (err) {
                         res.status(200).json({
                             httpCode: 200,
                             message: '上传成功',
                             data: {
                                 "fileurl": fileurl
                             },
                         });
                     });
                 }
 })

7,读取目录文件夹:fs.readdir(path,callback)

path为该目录的绝对物理路径，callback回调函数当中有两个参数err和files，err为错误信息参数，一般在该目录不存在或读取失败时触发调用，files为一个数组对象，包含该目录下的所有文件夹与文件的名字。（仅为文件夹的名字和文件名，不是路径形式）。

 fs.readdir('./newdir', function(err, files) {
     if (err) {
         throw err;
     }
     // files是一个数组
     // 每个元素是此目录下的文件或文件夹的名称
     console.log(files);
 });

8,删除一个空文件夹:fs.rmdir(path,callback)

path为该目录的绝对物理路径，callback回调函数当中也只有一个错误信息参数，一般在该目录不存在或者删除操作失败时触发调用。

 fs.rmdir('/tmp', function(err) {
     if (err) {
         throw err;
     }
     console.log('成功删除了 空文件夹 tmp');
 });

以上的实例均是异步操作,如果需同步操作在函数后面加Sync既可

 //同步 所有同步的函数都是函数后面加Sync；
  var res = fs.writeFileSync("1.txt","我是写入内容");

2.3,文件上传

1,单文件上传

 router.post('/upload', upload.single('file'), function (req, res, next) {
     var fileName = req.file.filename;
     var destDir = req.body.dir == undefined ? "default" : req.body.dir;
     var sourceFile = req.file.path;
     var destPath = path.join(__dirname.replace("routes", ""), "uploads", destDir, fileName);
     var dest_Dir = path.join(__dirname.replace("routes", ""), "uploads", destDir);
     var fileurl = uploadFileDomin + destPath.substr(destPath.indexOf("uploads"));
     fileurl = fileurl.replace(/\\/g, "/");
     fs.exists(dest_Dir, function (exists) {
         if (exists) {
             fs.rename(sourceFile, destPath, function (err) {
                 res.status(200).json({
                     httpCode: 200,
                     message: '上传成功',
                     data: {
                         "fileurl": fileurl
                     },
                 });
             });
         }
         else {
             fs.mkdir(dest_Dir, 0777, function (err) {
                 if (err) {
                     res.status(500).json({
                         httpCode: 500,
                         message: err,
                         data: [],
                     });
                 } else {
                     fs.rename(sourceFile, destPath, function (err) {
                         res.status(200).json({
                             httpCode: 200,
                             message: '上传成功',
                             data: {
                                 "fileurl": fileurl
                             },
                         });
                     });
                 }
             })
         }
     });

 });

2,多文件上传

 router.post('/uploads', upload.array('file', 8), function (req, res, next) {
     var paths = [];
     for (var i = 0; i < req.files.length; i++) {
         var path = req.files[i].path.replace(/\\/g, "/");
         var fileurl = uploadFileDomin + path.substr(path.indexOf("uploads")).replace('\\', '/');
         paths.push(fileurl);
     }
     res.status(200).json({
         httpCode: 200,
         message: '上传成功',
         "fileurls": paths,
     });
 });

最后抛出发送上传接口：

 app.use("/api", require("./fileUploadApi.js"));

三,前端调用

3.1,单文件上传调用

1,简单html

 <span>ajax upload</span>
     <div class="container">
         <label>file</label>
         <input type="file" name="file" id="file">
         <input type='button' value='上传' id="btn_upload" />
     </div>

2,js调用

  $("#btn_upload").click(function () {
             //创建一个FormDate
             var formData = new FormData();
             //将文件信息追加到其中
             formData.append('file', file.files[0]);
             formData.append('dir', 'attachment');
             //formData.append('name', file.files[0].name);
             $.ajax({
             url: "http://localhost:3000/api/" + 'upload',
             type: 'POST',
             data: formData,
             cache: false,
             contentType: false,
             processData: false,
             xhrFields: {
                 withCredentials: true
             },
             crossDomain: true,
             success: function (data) {
                 callBack(data);
             },
             error: function (response) {
                 console.log("error is :" + response);
             }
         });

3,实现效果

3.2,多文件上传调用

1,简单html

   <span>ajax multi files upload</span>
     <div class="container">
         <label>file</label>
         <input type="file" name="file" id="files1">
         <input type="file" name="file" id="files2">
         <input type="file" name="file" id="files3">
         <input type='button' value='上传' id="btn_uploads" />
     </div>

2,js调用

         var files1 = $("#files1")[0];
         var files2 = $("#files2")[0];
         var files3 = $("#files3")[0];
         $("#btn_uploads").click(function () {
             //创建一个FormDate
             var formData = new FormData();
             //将文件信息追加到其中
             formData.append('file', files1.files[0]);
             formData.append('file', files2.files[0]);
             formData.append('file', files3.files[0]);
             $.ajax({
             url: 'http://localhost:3000/api/' + 'uploads',
             type: 'POST',
             data: formData,
             contentType: false,
             processData: false,
             async: false,
             xhrFields: {
                 withCredentials: true
             },
             crossDomain: true,
             success: function (data) {
                 callBack(data.fileurls);
             },
             error: function (response) {
                 console.log("error is :" + response);
             }
         })
 })

3,实现效果