nodejs+multer+ajax文件上传

Posted leijee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nodejs+multer+ajax文件上传相关的知识,希望对你有一定的参考价值。

前端 html代码 + ajax代码

  form表单(无需指定action)

<form enctype="multipart/form-data" method="post" class="upload-cont">
    <input type="file" name="files1" class="files1">
    <input type="text" name="username" class="username">
    <input type="button" class="uploadBtn" value="点击上传">
</form>

  使用jquery中的ajax的方式上传文件

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(".files1").on("change",function(e){
     var e = e || window.event;
     var files = e.target.files;
     var file = files[0];
    //文件上传
    $(".uploadBtn").off("click").on("click",function(){
         var username = $(‘.username‘).val();
         var formData = new FormData();
         formData.append(‘files1‘,file);
         formData.append(‘username‘,username);
         console.log(file);
         $.ajax({
              url: "/ajaxUpload",
              type: "post",
              data:formData,
              contentType: false,
              processData: false,
              success: function(res){
                   console.log(res);
              },
              error:function(err){
                   console.log(err);
              }
       });
   })
})
</script>

FormData对象介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。

如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。

所以使用formData的时候 只需要在form上设置enctype="multipart/form-data",然后用ajax跟formData提交form表单数据,可代替直接用form表单submit提交方式。 

multer介绍

  Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据, 它主要用于上传文件. 它是写在 busboy 之上非常高效。

  注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据.

  multer文档地址:https://www.npmjs.com/package/multer
  引用地址:https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

windows下 安装 multer

npm install --save multer

multer的使用

var multer = require(‘multer‘);
/**
* process.cwd()获取项目根目录地址,可以将上传的文件指定到静态文件目录下,然后再返回地址给前端页面,如:
* var uploadPath = process.cwd()+‘/public/uploads‘ 前端访问地址 http://localhost:3000/uploads/文件名
**/
var uploadPath = process.cwd()+‘/uploads‘;//直接存放在根目录下uploads
var storage = multer.diskStorage({//multer存储引擎 存储引擎自定义引用 https://github.com/expressjs/multer/blob/master/StorageEngine.md destination: ,//指定上传文件的路径
filename: function (req, file, cb) { cb(null, file.fieldname + ‘-‘ + Date.now())//命名上传文件 } })
var multer = multer({
storage: storage,
   //limits:‘‘//Limits of the uploaded data
}).single(‘files1‘);//single 单文件上传,files1为form表单中 接受文件的name字段名称
app.post(‘/ajaxUpload‘,function(req,res){ 
  multer(req,res,function(err){
    if(err){
      console.log(err);
      return ;
    }
    console.log(req.body.username);//获取通过formData中表单的字段 name="username"的数据
    //req.body ajax提交的非文件数据
    //req.body.username //提交参数 username
    //req.file.fieldname 上传文件 input file name字段名称
    //req.file.filename 上传文件 文件名
    //req.file.originalname 上传文件 文件名
    //req.file.mimetype 上传文件类型
    //req.file.size 上传文件大小
    //req.file.destination 上传文件存在的路径
    //req.file.path 上传文件的 路径
    console.log(req.file.path);

     /**

         * 可以通过req.file中的参数,做一个文件上传的过滤,例如req.file.size 限制文件上传大小,req.file.mimetype 限制文件上传的类型

         **/

    res.send({msg:‘上传成功‘,img:req.file.path});//返回数据到前端页面,可以将上传的图片,在前端预览。
  })
});
在使用 res.send()发送数据到前端时,因为本文图片存放的地址是在项目根目录下,所以显示的地址是D:\leijie\test\express-mysql\uploads\share.png。
这种形式在页面上无法预览出来,如果想简单的使用预览出,可以将图片上传的目录存放在public静态目录下
静态目录设置 在app.js文件中设置 app.use(express.static(path.join(__dirname, ‘public‘)));

 相关链接:

 https://www.npmjs.com/package/multer

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

 

   https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

   https://github.com/expressjs/multer/blob/master/StorageEngine.md

   https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

以上是关于nodejs+multer+ajax文件上传的主要内容,如果未能解决你的问题,请参考以下文章

nodejs multer文件上传,路径包含双斜杠

Nodejs进阶:基于express+multer的文件上传

nodejs + multer + angularjs 无需重定向即可上传

NodeJs异步上传multer插件报Multipart: Boundary not found错误解决方法

nodeJs学习-08 multer中间件,解析post文件,上传文件

将所有multer上传的文件移动到Nodejs中的新目的地