#express#使用multer上传图片

一,安装multer模块
npm install --save multer

二,创建本地图片仓库 multer.diskStorage()

const storage = multer.diskStorage({
	//配置图片存储的位置路径
	destination: function(req,file,cb) {
		cb(null,路径);
	},
	//配置上传图片的名字
	filename: function(req,file,cb) {
		cb(null,图片名字);
	}
});

三,实例化multer对象,将仓储对象配置到multer对象中

const upload = new multer({storage});

四,在接口中使用upload对象 upload.single()

app.post("/upload",upload.single(图片数据的key值),(req,res) => {
	// 请求体含有file对象,对象包含图片的多个参数
	let {filename,size,mimetype} = req.file
})

*在前端上传图片

<body>
  <input type="file" id="file">
  <button id="submit">提交</button>
  <img src="" id="img">
</body>
<script>
  $("#submit").click(()=> {
    let flie = $("#file")[0].files[0];
    let formdata = new FormData();
    formdata.append("hehe",flie);
    $.ajax({
      url: "http://127.0.0.1/file/upload",
      type: "POST", 
      cache: false,
      processData: false,
      contentType: false,
      data: formdata,
      success: (data) => {
        console.log(data);
        $("#img").attr("src",`http://127.0.0.1${data.img}`)
      }

    })
    
  });
</script>
发布了11 篇原创文章 · 获赞 0 · 访问量 107

猜你喜欢

转载自blog.csdn.net/weixin_45037444/article/details/104134798