首页 > Web开发 > 详细

node express 使用中间件multer实现文件上传

时间:2020-10-07 21:51:56      阅读:31      评论:0      收藏:0      [点我收藏+]

typora-copy-images-to: images
typora-root-url: ./


node express文件上传步骤说明

  • 自定义存储文件名称

  • 自定义路径

1.创建项目

安装 express

 1.应用生成器工具 express-generator 可以快速创建一个应用的骨架。

  $ npm install express-generator -g

? $ express --no-view myapp(此处创建不带模板引擎)

? 2. 部署自动化刷新

npm install --save-dev nodemon

修改 package.json 的 scripts 内容:

"scripts": {   
 "start": "node ./bin/www",   
 "dev": "nodemon ./bin/www" 
 }

之后,使用

npm run dev 运行

2.前台页面

修改默认模板

<html>

<head>
  <title>Express</title>
  <link rel="stylesheet" href="/stylesheets/style.css">

</head>

<body>
  <input type="file" class="file" name=‘file‘>
  <a href="javascript:;" class="submit">提交</a>
</body>
<script>
  document.querySelector(‘.submit‘).addEventListener(‘click‘,function(){
      const files = document.querySelector(‘.file‘).files[0];
      console.log(files)
      let formdata = new FormData();
      formdata.append(‘file‘, files);
      fetch(‘/users/add‘,{
        method:‘POST‘,
        body:formdata
      }).then((res)=>{
        console.log(res)
      }).catch((err)=>{
        console.log(err)
      })
  })
</script>

</html>

技术分享图片

3.后台接口书写

安装中间件multer

cnpm install multer --save-dev

接口部署到user.js文件内

接口访问/users/add

user.js文件

var express = require(‘express‘);
var router = express.Router();
const multer = require(‘multer‘);/* 图片上传 */
const path=require("path");
/* GET users listing. */
router.get(‘/‘, function(req, res, next) {
  res.send(‘respond with a resource‘);
});
router.post(‘/add‘, uploadFile, function (req, res, next) {
  let src = req.body.file;
  res.json({‘state‘:‘success‘, ‘result‘: src });
});
//自定义中间件
function uploadFile(req,res,next){
	//dest 值为文件存储的路径;single方法,表示上传单个文件,参数为表单数据对应的key
  // let upload = multer({ dest: "public/uploads" }).single("photo");

  //设置文件的名称
  let filename = "";
  //获取绝对路径
  let fullPath = path.resolve(__dirname,"../public/uploads");
  console.log(fullPath)
  let storage = multer.diskStorage({
    //设置存储路径
      destination:(req,file,cb)=>{
            console.log("destination:",file);
            // cb(null,fullPath);
            cb(null,‘public/uploads‘);
      },
      //设置存储的文件名
      filename:(req,file,cb)=>{
          console.log("filename:",file);
          //获取文件的扩展名
          let extname=path.extname(file.originalname);
          filename=file.fieldname+"-"+Date.now()+extname;
          cb(null,filename);
      }
  })
  let upload = multer({ storage: storage }).single("file");
  /* single属性名需和上传的name一致否则报错:multererr:MulterError: */
	upload(req,res,(err)=>{
    console.log(req.file);
    /* 文件存入 */
    if (err instanceof multer.MulterError) {
      res.send("multererr:" + err);
      console.log("multererr:" + err);
      return false;
    }else if(err){
      res.send("err:" + err);
      return false;
    }else{
      //上传成功后,将图片写在req.body.photo中,继续住下执行
        // req.body.photo=filename;
      req.body.photo = req.file;
      console.log({ ‘filesuccess‘: req.file })
      next();
    }
	})
}
module.exports = router;

技术分享图片
技术分享图片

node express 使用中间件multer实现文件上传

原文:https://www.cnblogs.com/NB-JDzhou/p/13778341.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!