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方法用于对接受文件数的控制.

single(fieldname) 接收单个文件，通过req.file访问该文件
array(fieldnaem,[maxcount]) 接收多个文件,通过req.files数组方法文件.maxcount指定接收文件最大数.
fields(fields) 接受指定fieldname的文件,fieldname由客户端决定，通过req.files数组方法
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,实现效果

巴特西

NodeJs之文件上传

NodeJs之文件上传

一,介绍与需求

1.1,介绍

1.2,需求

二,配置实现

2.1,multer模块

2.2,fs模块

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

2.3,文件上传

三,前端调用

3.1,单文件上传调用

3.2,多文件上传调用

最新文章

热门文章