Express学习笔记（八）—— 文件上传与下载

文件上传

1. 安装：npm install multer --save

2. 导入

   let multer=require('multer')
   let fs=require('fs')
   

3. 初始化上传对象

   // 配置上传对象，上传到当前目录下public文件夹的upload文件夹中
   // express快速创建的项目，当前目录相对于服务器启动对应的目录
   let upload = multer({ dest: './public/upload' })
   

4. 上传文件路由

   // 上传单个文件
   post.post('/upload',upload.single('file'),(req,res)=>{
       let oldPath=req.file.destination+"/"+req.file.filename
       let newPath=req.file.destination+"/"+req.file.originalname
       // 更改上传文件的存储名称
       fs.rename(oldPath,newPath,(err,res)=>{
           console.log("名字更改成功")
       })
   })
   

5. 上传多个文件，请参考 Multer-GitHub

6. ajax上传

   <!--前端-->
   <form id="uploadform" method="post">
       <input id="input" type="file" name="file">
       <button id="submit">提交</button>
   </form>
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script>
       let formData 
       $('#input').change(function (e) {
           let file = this.files[0]
           // 创建formData对象，将文件追加到formData对象中   
           formData= new FormData()     
           formData.append('file', file)
           // 预览图片
           // 生成url地址
           let imgUrl=window.webkitURL.createObjectURL(file)
           let img=new Image()
           img.src=imgUrl
           $('body').append(img)   
       })
       $("#submit").click(function () {
           $.ajax({
               url: "http://localhost:3000/users/upload",
               method: 'POST',
               data: formData,
               processData: false,
               contentType: false,
           }).then(res=>{
               console.log(res) // 上传成功
           })
       })
   </script>
   

   // 后端
   app.post('/upload',upload.single('file'),(req,res)=>{
       // 设置路由允许所有源访问,否则会发生跨域问题
       res.append("Access-Control-Allow-Origin","*")
       // 设置路由允许所有请求类型访问
       res.append('Access-Control-Allow-Content-Type',"*")
       let oldPath=req.file.destination+"/"+req.file.filename
       let newPath=req.file.destination+"/"+req.file.originalname
       fs.rename(oldPath,newPath,()=>{})
       res.json('上传成功')
   })
   

文件下载

• 后端代码

  app.get('/download', async (req, res) => {
      res.download("./public/upload/jq.jpg")
  })
  

• 前端代码

  <button id="download">下载</button>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script >
      $('#download').click(()=>{
          window.location.href="http://localhost:3000/users/download"
      })
  </script>