1、前端DOM:
<section class="index-project-image-section" data-pro-code="">
<div class="index-project-image-container">
<h3>款号图片</h3>
<form id="index-project-image-upload">
<span>上传图片:</span>
<input type="file" name="file" id="image-file" accept="image/jpeg,image/png,image/jpg">
<div class="index-project-image-show">
<img id="image-show" src="" alt="">
<p>没有图片,请点击上方按钮上传!</p>
</div>
<div class="index-project-image-btn">
<button type="button">取消</button>
<button type="submit">确认上传</button>
</div>
</form>
</div>
</section>
2、前端JS:
$('#index-project-image-upload').on('submit',function(e){
e.preventDefault();
if($('#image-file')[0].files[0] === undefined){
alert('请选择图片文件!')
return;
}
var formData = new FormData(this);
formData.append('proCode',$('.index-project-image-section').attr('data-pro-code'))
$.ajax({
url:'yourUrl',
type:'yourType',
data:formData,
contentType: false,
processData: false,
success:function(res){
if(res.code==200){
var userResponse = confirm(res.text);
if(userResponse){
window.location.reload()
}else{
window.location.reload()
}
}else{
alert(res.text)
}
},
error:function(err){
alert(err.status+':'+err.statusText)
}
})
})
3、Node后端:
// 引入multer包
const multer = require('multer');
// 实例化multer
const upload = multer();
// 在接受文件的路由上,配置multer中间件
router.post('/yourUrl',upload.any(),function(req,res,next){
// 获取第一个文件
var file = req.files[0];
// 获取文件名称
var fileName = file.originalname;
// 获取文件尾缀(类型)
var fileExt = fileName.split('.').pop();
// 获取文件内容
var file_content = file.buffer;
// 其他的逻辑......
})