node+express+jquery 单图和多图上传

最近开发了一个小的页面,单图和多图上传。node+express搭建本地服务器,采用Jquery编写传统的逻辑代码。

核心代码:

app.js

var fs = require('fs')

var multer = require('multer')

var express = require('express')

var path = require('path')

var router = express.Router()


let storage = multer.diskStorage({

  destination: function(req, file, cb) {

    // 文件初始路径

    const date = new Date();

    const toPad2 = num => num.padStart(2, '0');

    const filePath = `./public/uploadimg/${date.getFullYear()}${toPad2(`${date.getMonth() + 1}`)}${toPad2(

      `${date.getDate()}`)}_images`;

    if (!fs.existsSync(filePath)) {

      fs.mkdir(filePath, err => {

        if (err) {

          console.log(err)

        } else {

          cb(null, filePath)

        }

      })

    } else {

      cb(null, filePath)

    }

  },

  filename: function(req, file, cb) {

    var ext = path.extname(file.originalname)

    // UUID 处理

    function guid() {

      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(

        c

      ) {

        var r = (Math.random() * 16) | 0,

          v = c == 'x' ? r : (r & 0x3) | 0x8

        return v.toString(16)

      })

    }

    cb(null, file.fieldname + guid() + Date.now() + ext)

  }

})

var upload = multer({ storage: storage })

//单文件上传

router.post('/upload1', upload.single('file'), function(req, res, next) {

  const date = new Date();

  const toPad2 = num => num.padStart(2, '0');

  const imgDir = `${date.getFullYear()}${toPad2(`${date.getMonth() + 1}`)}${toPad2(

      `${date.getDate()}`)}_images/`;

  res.json({

    code: 200,

    filePath:

      'http://' +

      req.headers.host +

      '/uploadimg/' + imgDir +

      path.basename(req.file.path)

  })

})

//多文件上传

router.post("/upload2",upload.array("file",20),function(req,res,next){  

  const date = new Date();

  const toPad2 = num => num.padStart(2, '0');

  const imgDir = `${date.getFullYear()}${toPad2(`${date.getMonth() + 1}`)}${toPad2(

      `${date.getDate()}`)}_images/`;

  var filePath=[];

  for(var i=0; i

    var tmpPath = 'http://' +

     req.headers.host +

     '/uploadimg/' + imgDir +

     path.basename(req.files[i].path);

     filePath.push(tmpPath);

  }

  res.json({

    code:200,

    filePath:filePath

  })

})

//提交

router.post('/submmit', function(req, res) {

  console.log(req)

  var data={

    "similarList":[

      {

        "cutImgPath":"img/1.jpg",

        "picName":"ddd",

        "segNum":"",

        "similarValue":"80%"

      },

      {

        "cutImgPath":"img/2.jpg",

        "picName":"ddd",

        "segNum":"",

        "similarValue":"60%"

      }

    ]

  }

  res.json({ code: 200, data: data })

})

module.exports = router


html

  

    图片对比识别

    

    

    

  

  

    

      图片对比识别平台

      

        class="form-horizontal"

        enctype="multipart/form-data"

        method="post"

        action="javascript:;"

        role="form"

        id="frmUploadFile"

      >

      

        

          原图片:

          

          

            确认上传

          

        

      

        

          对比图片:

          

          

            确认上传

          

          

        

        

          

            开始识别

          

        

       

      

      

        图片识别结果

        

          信息要素

          识别结果

        

        

          暂无结果

        

      

    

    

  

你可能感兴趣的:(node+express+jquery 单图和多图上传)