2/13 express 后台接受图片的简单配置（ 使用 multiparty 、fs ）

写在前面

　　这次是总结一下昨天写的代码 当时只是囫囵吞枣 看着别人的代码一葫芦画瓢弄的

　　今天仔细推敲一下

　　知道依照葫芦画瓢简单，但是还是要深入本质看问题

---

前端　　

　　首先是Vue的一个组件代码（ method ）

　　详情请见 https://www.cnblogs.com/WaterMealone/p/14399406.html

　　

 后台 

　　后台是由 express 弄得，既然都到这里，我觉得简单的路由配置 应该会了

　　首先我们得在app,js入口文件里面加上用于解析请求体的代码

　　

　　顾名思义 body-parser 就是解析 body 中的数据的

　　我们第一步先引入

var bodyParser = require('body-parser');

　　第二，进行use 

app.use(bodyParser.json()); // 对 json 格式 进行解析
app.use(bodyParser.urlencoded({ extended: false })); // 对 form 表单进行解析（ extended：false 指的是简单进行解析，没有深度解析）

　　至于 extended 属性的具体含义 请参考如下文章

　　https://www.cnblogs.com/lianer/p/5178693.html

　　然后开始定义一个路由（ 在routes里面新建的一个js文件 的部分代码 ）

　　

　　在此之前我们得 

cnpm multiparty --save

　　然后才能用这个代码

　　首先了解一下 multiparty 

　　

　　这些都有点抽象，简单的来说，我们只需要解析 req 就行了，就需要我们这个

　　首先 生成一个 multiparty 的 form ( 前端是由 formdata 传的文件 ）

　　并对form的属性进行设置，当然这里可以直接初始化的时候就设置

      /* 生成multiparty对象，并配置上传目标路径 */
      let form = new multiparty.Form();
      // 设置编码
      form.encoding = 'utf-8';
      // 设置文件存储路径，以当前编辑的文件为相对路径
      form.uploadDir = './images';
      // 设置文件大小限制
      // form.maxFilesSize = 1 * 1024 * 1024;    

　　初始化就设置的话 就是这样，通过 键值对 这样设置

　　

　　然后进行对 "传入"  form  进行处理（ 解析 ）

// callback 有三个参数 第一个是错误信息   
// 第二个是 fields 指的是 form表单 中的多个 input
// 第三个是 传入form中的 文件   
form.parse(req, function (err, fields, files) {

        try {

        ...  // 对上传的文件进行重新命名（ 推荐 随机数生成名命方法 ）

        } catch (err) {

                ...  // 主要是对错误的处理 一般res.send( "error!" )
    

        };

      })    

　　第一个应该不用解释 就是错误信息

　　第二个 简单来说一下 

　　　　这个是我前端写的代码 我没有用表单，只是通过一个method方法添加到了formdata里面

　　　　

　　　　这个时候 fields 应该是什么都没有但有 file 的信息

　　　　

　　　　如果我是按照正常方法用表单提交如果是这样的话

　　　　

　　　　

　　　　然后 后台的 console

　　　　

 　　　　（ 这里指的应该是 type= text 有 name 属性的  ）

　　　　再比如前面加了 checkbox fields 增加

　　　　

　　第三个就是 files 前面form里面的 file 如果有名字 不重名的话就是一个数组

　　解释得差不多了 这个代码应该就看得懂了

  form.parse(req, function (err, fields, files) {
        try {
        console.log(files)
        console.log(files.pic[0])
        console.log(fields)
          let inputFile = files.pic[0];
          let newPath = form.uploadDir + "/" + inputFile.originalFilename;
          // 同步重命名文件名 fs.renameSync(oldPath, newPath)
    　　　 //oldPath  不得作更改，使用默认上传路径就好
          fs.renameSync(inputFile.path, newPath);
          res.send({ data: "上传成功！" });
        } catch (err) {
          console.log(err);
          res.send({ err: "上传失败！" });
        };

　　简单解释一下 fs 这个是express的一个组件，就是对文件操作的组件，这里用了 renameSync 方法 对后台自己弄的名字 改了一下

　　

总结

　　express 的上传太简单了吧

　　Spring 可以搞死我