最近开发了一个小的页面,单图和多图上传。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
图片识别结果
- 信息要素
- 识别结果
- 暂无结果
//获取配置文件
var types;
var filePath1;
var filePath2;
/******************文件上传*************************************/
function uploadImage(index) {
var oneOrMore = index;
var headPhotoFile;
if(oneOrMore=='0'){
headPhotoFile=$("#fileupload1");
}else{
headPhotoFile=$("#fileupload2");
}
if (headPhotoFile[0].files.length == 0) {
alert('请上传影像');
return
}
if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(headPhotoFile.val())){
alert("图片类型必须是gif,jpeg,jpg,png中的一种");
return;
}
var url="";
if(index=='0'){//说明是原文件上传
var file = $("#fileupload1");
var formData = new FormData();
formData.append('file',file[0].files[0]);
url = "/upload1";
console.log(formData);
// var formData = new FormData($('#fileupload1')[0])
}else{//说明是对比图上传
var file = $("#fileupload2");
var formData = new FormData();
for(var i=0;i formData.append('file',file[0].files[i]); } console.log(formData); url = "/upload2"; } $.ajax({ url: url, type: 'post', data: formData, async: false, cache: false, contentType: false, processData: false, success: function(data) { if (200 === data.code) { if (data.filePath) { if(oneOrMore=='0'){ filePath1 = data.filePath; }else{ filePath2 = data.filePath; } alert("上传成功"); $('.submmit').attr('disabled', false) } } else { alert('上传失败') } }, error: function(err) { console.log('err', err) alert('影像上传服务通信发生错误') } }) } function submmit() { if ($('#fileupload1')[0].files.length == 0 || $('#fileupload2')[0].files.length == 0) { alert('请先上传影像') return } //获取当前影像类型 var index = $('input:radio[name="filetype"]:checked').attr('id'); var id = Math.random(1,100); $.ajax({ url: '/submmit', type: 'post', data: {img: filePath1,multImgData:filePath2,uuid:id }, async: false, success: function(data) { if (200 === data.code) { alert('识别成功') //数据处理 console.log(data); } $('.content').html(_html); $('.submmit').attr('disabled', true) } }, error: function(err) {} }) } $('input').on('change', function(event) { var files = event.target.files, reader = new FileReader() if (files && files[0]) { reader.onload = function(ev) { // $('img').attr('src', ev.target.result); } reader.readAsDataURL(files[0]) } })