美文网首页
day3.node(关于文件上传和mock模拟假数据)

day3.node(关于文件上传和mock模拟假数据)

作者: 阿沙冲冲冲 | 来源:发表于2019-06-21 20:41 被阅读0次

文件上传

1.npm的包formidable

//引入相应的模块
var formidable = require('formidable'),
    http = require('http'),
    util = require('util');
 
http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // form变量里存的就是前段发送过来的表单信息
    var form = new formidable.IncomingForm();
    //解析这个表单
    form.parse(req, function(err, fields, files) {
        //处理这个表单里面的字段和文字
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));
    });
 //fields:里面是一些字段
      //files:就是你所上传的图片信息,如路径,格式,时间等
    return;
  }
 
  // 显示文件上传表单
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '<form action="/upload" enctype="multipart/form-data" method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload" multiple="multiple"><br>'+
    '<input type="submit" value="Upload">'+
    '</form>'
  );
}).listen(8080);

相关的API

form.keepExtensions = false;(保留上传文件后缀名把值设为true)

form.uploadDir="/"(设置文件放的目录)

mock.js (模拟假数据)

? $npm install mockjs // 安装mockjs

? 注:使用mockjs必须要解决跨域问题,可以使用cors插件允许所有源访问

// 使用 Mock
// 模拟来自list页面的get请求
var Mock = require('mockjs')
var router = require('express').Router()
router.get('/list',(req,resp)=>{
    var res_body = Mock.mock({
        // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数,起始值为 1,每次增 1
            'id|+1': 1
        }]
    })
    // 输出结果
    resp.json({
        "res_code": 200,
        res_body
    })
})

// 模拟来自detail页面的post请求,比list会多一步接受list跳转过来的参数{id}
var Mock = require('mockjs')
var router = require('express').Router()
router.post('/detail',(req,resp)=>{
    // 接受list页面请求携带的id
    var {id} = res_body
    var res_body = Mock.mock({
        // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
        'detail|1-10': [{
            'id|+1': parseInt(Math.random()*10000),
            'title': '@ctitle(20,30)',
            'price': '@float(100,1000,2,2)',
            'img': '@image(300x100, @color,#fff,png,@word)'
        }]
    })
    // 输出结果
    resp.json({
        "res_code": 200,
        res_body
    })
})

module.exports = router

相关文章

  • day3.node(关于文件上传和mock模拟假数据)

    文件上传 1.npm的包formidable 相关的API form.keepExtensions = false...

  • mock server

    使用mock server模拟数据 文件结构:[图片上传失败...(image-891014-1561023558...

  • 生产环境和开发环境baseURL无缝切换

    前端和后端做交互时候,当后端数据没有做好情况,我们在开发环境中需要自己mock数据(mock假数据,模拟开发),这...

  • mock

    mock使用优势:前后端同时开发的时候,后端接口数据没有出来,前端可以mock假数据,模拟开发 1,安装mock依...

  • mock数据

    Vue中的mock数据指的是什么? mock数据指的模拟数据,mock中文翻译愚弄,嘲笑。 实现mock数据如下:...

  • mock.js深入

    1.Mock.mock( template )根据数据模板生成模拟数据。(具体语法见mock.js入门) 2.Mo...

  • Vue Cli3.0 mock数据

    1、public目录下新建mock文件夹,存放模拟数据.json文件; public下的静态资源不经过webpac...

  • mock服务入门实践

    mock是以代码来实现fiddler的一个功能,模拟返回数据 mock模拟接口返回数据,如下在test_metho...

  • 2018-07-20

    java httpclient 模拟表单发送数据@ApiOperation(value = "上传文件", not...

  • react全家桶搭一个博客 - 复盘

    文件目录 api 与 配置文件 与一个入口HTML api里就是mock的json数据,模拟从数据库中取数据。 w...

网友评论

      本文标题:day3.node(关于文件上传和mock模拟假数据)

      本文链接:https://www.haomeiwen.com/subject/slzuqctx.html