上传文件upload

上传文件

enctype:前端设置上传数据的格式

//第一种：键值对
application/x-www-form-urlencoded
//第二种
application/json
//第三种：上传
multipart/form-data

后端接口需要的操作

1. 下载插件

   npm i multiparty
   

2. 引入插件(表现成/index.js)

   //引入path插件
   const path = require('path');
   //引入multiparty的下载文件插件
   const multiparty = require('multiparty');
   

   1.第一句：创建multipary对象，uploadDir：指定上传的文件存放的地址
   2.第二局：form.parse
   3.上传的name都叫file
   

3. 配置插件(表现成/index.js)

   //文件上传
   router.post("/upload", function (req, res) {
     var form = new multiparty.Form({ uploadDir: "./public/images" });
     form.parse(req, function (err, fields, files) {
       if (err) {
         res.send(err);
       } else {
         console.log(files.file);
         var p = files.file[0].path.substring(
           files.file[0].path.indexOf("images")
         );
         res.send({filename:path.basename(p)});
       }
     });
   });
   

4. commd文件夹里面add.js里面写按钮和图片显示

   <button type="button" class="layui-btn" id="uploadBtn">
       <i class="layui-icon">&#xe67c;</i>上传图片
   </button>
   <img id="headImg" width="50" height="50" />
   <input type="hidden" name="headImg" >  
   

5. 配置上传文件按钮（add.js）

   let { $, layer,form,table,upload} = layui;
   upload.render({
       elem:"#uploadBtn",
       url:"/upload",
       done(res){
       console.log("res:",res);
       //把图片渲染在页面
       $("#headImg").attr("src","/images/"+res.filename);
       //设置一个隐藏存放图片的名字
       $("[name=headImg]").val(res.filename);
       }
   })
   

6. 把数据存在数据库里面（students.js,model下面的studensModel.js）

   //增加学生
   router.post('/', async function (req, res) {
       let { name, age, gender ,cls ,headImg} = req.body;
       console.log("req.body", req.body);
       let data = await studentService.add({ name, age, gender ,cls ,headImg});
       // console.log(data);
       res.send({ data })
   });
   // headImg:String,
   

7. 把图片显示在页面

   success(res) {
                           $.ajax({
                               type: "get",
                               url: "/class/all",
                               success(reres) {
                                   let str = reres.data.map(item => `<option value="${item._id}">${item.classname}</option>`).join("");
                                   // console.log(str);
                                   $("[name=recls]").html(str);
                                   form.render();
                                   console.log(data,data.cls._id,data.headImg);
                                   form.val("editContent", {
                                       name: data.name,
                                       age: data.age,
                                       gender: data.gender,
                                       recls: data.cls._id
                                   });
                                   $("#headImg").attr("src","/images/"+data.headImg);
                                   upload.render({
                                       elem:"#uploadBtn",
                                       url:"/upload",
                                       done(res){
                                           console.log("res:",res);
                                           //把图片渲染在页面
                                           $("#headImg").attr("src","/images/"+res.filename);
                                           //设置一个隐藏存放图片的名字
                                           $("[name=headImg]").val(res.filename);
                                       }
                                   })
                               }
                           });
                           // console.log("res.data.cls",res.data,res.data.cls,res.data.cls.classname);
                       }