<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.gtimg.com/cdnjs/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<title>Title</title>
</head>
<body>
<img class="photo photo-img" src="">
<form id="img_form" action="" method="POST" enctype="multipart/form-data">
<input name="img" type="file" id="img-input"/>
</form>
<script>
$('#img-input').change(function (e) {
let param = new FormData(); // 创建form对象
param.append('file', $("#img-input")[0].files[0]); // 通过append向form对象添加数据
let config = {
headers: {
'Content-type': 'application/x-www-form-urlencoded'
}
}; // 添加请求头
axios.post('http://172.16.71.147:3000' + '/upload/img', param, config).then(res => {
$('.photo-img').attr('src', 'http://172.16.71.147:3000' + res.data.data.url);
}).catch(err => {
});
})
</script>
</body>
</html>
var express = require('express');
var multer = require("multer");
var app = express();
var bodyParse = require('body-parser');
// 设置图片存储路径
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'public/uploads');
},
filename: function(req, file, cb) {
cb(null, `${Date.now()}-${file.originalname}`)
}
})
// 添加配置文件到muler对象。
var upload = multer({ storage: storage });
// bodyParse 用来解析post数据
app.use(bodyParse.urlencoded({extended:false}));
app.use(express.static('public'));
// 解决跨域问题
app.all('*',function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200); //让options请求快速返回
}
else {
next();
}
});
app.get('', function (req, res) {
res.end('111');
});
// 文件上传请求处理,uploads.array 支持多文件上传,第二个参数是上传文件数目
app.post('/upload/img', upload.single('file'), function (req, res) {
// 读取上传的图片信息
console.log('111122222')
var file = req.file;
console.log(file)
// 设置返回结果
var result = {};
result.code = 0;
result.data = {
url: '/uploads/' + file.filename
}
result.errMsg = 'success';
console.log(result)
res.end(JSON.stringify(result));
});
// 监听3000端口
var server=app.listen(3000, '0.0.0.0', function () {
console.log('listening at =====> http://0.0.0.0:3000......');
}) ;