#express#使用multer上传图片

最新推荐文章于 2024-02-23 18:55:51 发布

jay张

最新推荐文章于 2024-02-23 18:55:51 发布

阅读量214

点赞数

分类专栏： express 文章标签： nodejs

本文链接：https://blog.csdn.net/weixin_45037444/article/details/104134798

版权

express 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一，安装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>