multer使用

multer使用使用multer1、在项目中下载multer操作模块Npminstallmultersave前端代码:<formclass="layui-form"action="/add"method="POST"enc

大家好,欢迎来到IT知识分享网。multer使用

使用multer

1、      在项目中下载multer操作模块

  Npm install multer  –save

前端代码:

  <form class=”layui-form” action=”/add” method=”POST” enctype=”multipart/form-data”>

  注意只要是上传文件请设置form enctype属性为:multipart/form-data

设置完即可

服务器代码

1、      引入multer模块

  Var multer = require(“multer”);

2、      引入fs模块用于更改上传文件的名称

3、      设置上传文件保存路径

//配置上传文件的保存路径  放到public下upload目录中方便前端代码访问 upload文件如果不存在会自动创建

var upload = multer({ dest: ‘public/upload/’ });

单文件上传:

 使用single(filename)

Router.post(“/router”,upload.single(filename),function(req,res,next){

    Res.send(“上传成功”)

})

多文件上传:

前端修改:

<input type=”file” id=”L_repass” multiple name=”img”  autocomplete=”off” class=”layui-input”>

添加属性 multiple为选择多个文件

后端代码使用循环上传文件

把upload.single改为upload.array(“imgs”,5)

Imgs:file  name属性值

设置只选择图片accept=”image/png,image/gif,image/jpg,image/jpeg”

 

5:为上传文件个数限制最大5

把req.file 改为files

 

注意:这个时候上传的文件没有后缀名需要自己编写代码处理

处理后缀名:使用fs模块中的

  //得到文件信息

     var file = req.file;

     console.log(file);

        //修改文件名称

     fs.renameSync(file.path,”public/upload/”+file.originalname);

     res.send(“上传成功”);

处理文件随机名称可以使用时间戳与随机数进行处理

router.post(‘/add’,upload.single(‘img’), (req, res) => {

     //得到文件信息

     var file = req.file;

     console.log(file);

     var filename = “public/upload/”;

     if(file.mimetype == “image/jpeg”){

        filename+=new Date().getTime()+(Math.round(Math.random()*10000))+”.jpg”;

     }else if(file.mimetype == “image/png”){

        filename+=new Date().getTime()+(Math.round(Math.random()*10000))+”.png”;

     }else{

      res.send(“上传文件格式不支持请上传png与jpg图片”);

     }

     fs.renameSync(file.path,filename);

     res.send(“上传成功”);

});

最后把图片路径信息与其他信息保存到数据库中

//files为提交过来的表单中file组件的name属性值

router.post(‘/add’,upload.single(‘img’), (req, res) => {

     //得到文件信息

     var file = req.file;

     var filename = “upload/”;

     if(file.mimetype == “image/jpeg”){

        filename+=new Date().getTime()+(Math.round(Math.random()*10000))+”.jpg”;

     }else if(file.mimetype == “image/png”){

        filename+=new Date().getTime()+(Math.round(Math.random()*10000))+”.png”;

     }else{

      res.send(“上传文件格式不支持请上传png与jpg图片”);

     }

     fs.renameSync(file.path,”public/”+filename);

 

     var sql = `INSERT INTO stuinfo (stuname, stuicon, stusex, stuage, stutel,stuaddress) VALUES (‘${req.body.username}’, ‘${filename}’, ‘${req.body.sex}’, ‘${req.body.age}’, ‘${req.body.tel}’, ‘${req.body.address}’)`;

 

     mdb(sql,function(err,result){

         res.send(“添加信息成功”)

     })

});

 

Ajax 上传图片

1、      手动初始化formData对象

2、      把你要上传的数据append进fromData对象中

3、              // 得到选中上传的文件对象

4、              let file=$(“#imgajax”)[0].files[0];

5、              //实例化formdata对象

6、              let formdata=new FormData();

7、              // 把要上传的图片对象添加到formdata里面去

        formdata.append(“img”,file)

 

append(“key”,value)

key:类似于 表单中文本域中name的属性值

value:数据

$(“#img”)[0].files[0]类似于document.getElementById(“img”).files[0]

在ajax中添加两个属性

contentType: false,内容类型设置为false

processData: false,数据编码设置为false类似于enctype=”multipart/form-data”

        // 得到选中上传的文件对象

        let file=$(“#imgajax”)[0].files[0];

        //实例化formdata对象

        let formdata=new FormData();

        // 把要上传的图片对象添加到formdata里面去

        formdata.append(“img”,file)

        // ajax上传

        $.ajax({

            type: “POST”,  //默认get

            url: “/uploadImg/addimg”,  //默认当前页

            data: formdata,  //格式{key:value}

            contentType:false,

            processData:false,

            dataType: “json”,

            beforeSend: function () {}, //请求发送前回调,常用验证

            success: function (response) {  //请求成功回调

                alert(“上传成功”)

            },

            error: function (e) {  //请求超时回调

                if(e.statusText == “timeout”){

                    alert(“请求超时”);

                }

            },

            complete: function () {}, //无论请求是成功还是失败都会执行的回调,常用全局成员的释放,或者页面状态的重置

        });

 

Ajax多张上传

把选择的多个文件对象循环添加到formdata对象中去

        let files=$(“#imgajaxs”)[0].files;

        let formdata=new FormData();

 

        for (const file of files) {

        formdata.append(“imgs”,file)

        }

 

 

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/30800.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信