使用Jquery ajax及Node后端实现图片上传功能

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>


ss-
发布了20 篇原创文章 · 获赞 7 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/month_ss_815/article/details/80460548