nodejs学习笔记之（文件上传，下载）

文件上传

上传单个文件

ejs模板

  <!-- enctype="multipart/form-data"  表示定义表单的上传类型是文件类型 -->
  <form action="/imgUpload" method="post" enctype="multipart/form-data" >
    <input type="file" name="imgfile">
    <button type="submit">上传</button>
  </form>

js代码

// 上传模块
let multer = require('multer')
// 配置上传对象,对象里面是路径
let upload =multer({dest:'./public/upload'})
let fs = require('fs')

router.get('/sc',(req,res)=>{
  res.render('sc.ejs')
})
// upload.single('imgfile') 对ejs中input中的name相对应
router.post('/imgUpload',upload.single('imgfile'),(req,res)=>{
  console.log(req.file);
  /* {
  fieldname: 'imgfile',
  originalname: 'classGroupTemplate (3).xlsx',
  encoding: '7bit',   // 编码 二进制数据
  mimetype: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  destination: './public/upload',
  filename: '7c6c3bc273d9b4b3462df54a1977050e',
  path: 'public\\upload\\7c6c3bc273d9b4b3462df54a1977050e',
  size: 10589
} */

  // 改名
  let oldName = req.file.destination+'/'+req.file.filename
  let newName = req.file.destination + '/' + req.file.originalname
  fs.rename(oldName,newName,()=>{
    console.log('改名成功');
  })
  console.log(newName);
  
  res.send("上传成功<img src='/upload/"+req.file.originalname+"' />")
})

上传多个文件

  <!-- enctype="multipart/form-data"  表示定义表单的上传类型是文件类型 -->
  <form action="/imgUpload" method="post" enctype="multipart/form-data" >
    <input type="file" name="imgfile" multiple>
    <button type="submit">上传</button>
  </form>

router.post('/imgUpload',upload.array('imgfile',2),(req,res)=>{
  req.file.forEach((item,index)=>{
      // 改名
  let oldName = req.file.destination+'/'+req.file.filename
  let newName = req.file.destination + '/' + req.file.originalname
  fs.rename(oldName,newName,()=>{
    console.log('改名成功');
  })
  res.send("上传成功<img src='/upload/"+req.file.originalname+"' />")
  })
})

ajax文件上传

  <form id="uploadFrom" action="/ajax" method="post" enctype="multipart/form-data" >
    <input id="uploadInput" type="file" name="imgfile" multiple>
    <div class="btn">上传</div>
  </form>
  <!-- 这里这样银日，是因为浏览器访问这个引入是通关静态文件，所以这里的文件需要放到静态文件中，并且引入方式是这样的 -->
  <script src="/js/jquery-3.4.1.min.js"></script>
  <script>
    let fileObj = new FormData()
    $('#uploadInput').change(function(e){
      let file = this.files[0]
      fileObj.append('imgfile',file)
    })
    $('.btn').click(function(){
      $.ajax({
        url:'/imgUpload',
        method:'post',
        data:fileObj,
        // 是否对数据进行处理
        processData:false,
        // 是否对文件进行处理
        contentType:false
      }).then(res =>{
      // 这里返回的数据，其实就是node路由那里res.send里面的数据。看下面代码
        console.log(res);
      })
    })
  </script>

router.post('/imgUpload',upload.single('imgfile'),(req,res)=>{
  let oldName = req.file.destination+'/'+req.file.filename
  let newName = req.file.destination + '/' + req.file.originalname
  fs.rename(oldName,newName,()=>{
    console.log('改名成功');
  })
  // 这里面的数据就是ajax发送请求后得到响应的数据，就是then里面的（res）
  res.send("上传成功<img src='/upload/"+req.file.originalname+"' />")
})

但其实一般都是返回一个json数据给前端

router.post('/imgUpload',upload.single('imgfile'),(req,res)=>{
  // 改名
  let oldName = req.file.destination+'/'+req.file.filename
  let newName = req.file.destination + '/' + req.file.originalname
  fs.rename(oldName,newName,()=>{
    console.log('改名成功');
  })
  // 这里
  res.json({
    state:'ok',
    url:'/upload/'+req.file.originalname
  })
})

实现预览

      // 预览图片
      // 下面 window.webkitURL.createObjectURL(file) 方法作用就是给参数生成一个url
      let httpurl = window.webkitURL.createObjectURL(file)
      // 把url赋值给img的src
      $('#yulan').attr('src',httpurl)

下载

  <form id="uploadFrom" action="/ajax" method="post" enctype="multipart/form-data" >
    <input id="uploadInput" type="file" name="imgfile" multiple>
    <div class="btn">上传</div>
    <div class="btn1"><a href="/down">下载</a></div>
    <img id="yulan" src="" />
  </form>

// 下载一定是get请求
router.get('/down',(req,res)=>{
// 下面这个方法也是响应回传给前台的数据，前台的res收到的就是这个数据
  res.download(name)
})