Node 后端代码:
const express = require("express");
const router = express.Router();
const fs =require("fs");
const multer =require("multer");
const upload = multer({
dest: "upload/"
}) ;
const single = upload.single("myfiles");
router.get("/img/:imgname",function (req,res) {
const rs = fs.createReadStream("upload/"+req.params.imgname);
rs.pipe(res);
});
router.post("/file" ,single,function(req,res){
res.send(req.file);
console.log(req.file);
// console.log(req.file);
});
module.exports= router;
前端实现:
<body>
<input type="file" multiple enctype="multipart/form-data">
<p class="pic">
</p>
</body>
<script type="text/javascript">
$("input").change(function(event ){
// console.log(event.target.files[0]);
const files=event.target.files[0];
const formdata=new FormData();
formdata.append("myfiles",files);
// for(let item of files){
// formdata.append("myfiles",item);
// }
// const xhr=new XMLHttpRequest();
// xhr.open('post','/ajax/file')
$.ajax({
url:"ajax/file",
type:"post",
data:formdata,
processData: false,
contentType: false,
// dataType:"json", 这个不需要写,要不然写了success不执行
success:function (data) {
console.log(data);
const imgurl="/ajax/img/"+data.filename;
console.log(imgurl);
const img = new Image();
img.src = imgurl;
img.width = "280" ;
img.height = "150" ;
$("p").append(img);
}
})
})
</script>