108-《前后端分离实战》-图片上传

目录

• 完成图片上传

一、图片上传

• 前提：使用前端Ajax将图片传递到服务器，后端接受后保存到public文件夹下的images文件夹中

• 整体思路

  • 前端通过给input设置change事件，当选择文件时会触发。然后事件中获取文件数据并利用Ajax传递给后端。后端接受后使用第三方npm包multer完成文件的处理并保存到public/images中,并返回保存后的地址给前端

1.1 前端部分

• 详细流程

  • 1.给上传input标签设置change事件

    $('body').on("change","#addMovieUpload",function(){
      console.log('触发change');
    })
    

  • 2.获取待上传的文件数据

    $('body').on("change","#addMovieUpload",function(){
      let file = this.files[0];
    })
    

  • 3.使用new FormData()将文件转为formdata（表单数据），方便后端接受并处理

    $('body').on("change","#addMovieUpload",function(){
      let file = this.files[0];
      let fd = new FormData();
      fd.append('file',file);
    })
    

  • 4.配置Ajax，在传输文件数据中不需要对文件数据做默认的json转换处理

    $('body').on("change","#addMovieUpload",function(){
      let file = this.files[0];
      let fd = new FormData();
      fd.append('file',file);
      $.ajax({
          url:'/api/movies/upload',
          type:'post',
          data:fd,
          success:function(res){
              console.log(res);
          },
          //不处理发送数据并不规定数据类型。保证数据原封不动的传递给后端去处理。
          processData:false,
          contentType:false
      }) 
    })
    

  • 0. 如果上传成功后可以将图片地址作为预览图片的src属性

    $('body').on("change","#addMovieUpload",function(){
      let file = this.files[0];
      let fd = new FormData();
      fd.append('file',file);
      $.ajax({
          url:'/api/movies/upload',
          type:'post',
          data:fd,
          success:function(res){
              console.log(res);
              if(res.code==200){
                  $(".image-frame").attr('src',res.data);
              }
          },
          //不处理发送数据并不规定数据类型。保证数据原封不动的传递给后端去处理。
          processData:false,
          contentType:false
      }) 
    })
    

1.2 后端部分

• 详细流程

  • 1.需要下载文件的处理第三方包:multer

    npm i multer
    

  • 2.在路由js文件书写针对文件的处理函数

    router.post('/upload',function(req,res,next){
    })
    

  • 3.路由js文件引入文件处理函数:使用了nodejs自带的fs文件模块，方便multer处理前端传递的文件

    const {uploadFiles} = require('../util/handleFile.js');
    router.post('/upload',function(req,res,next){
    })
    

  • 4.利用解构出来的uploadFiles完成图片保存参数的设置，得到指定配置的图片处理函数并完成图片的上传处理，并得到图片上传后的路径

    router.post('/upload',function(req,res,next){
        let uploadImages = uploadFiles();
        uploadImages(req,res,(err)=>{
        if(!err){
          let filepath ="http://localhost:3000/images/"+req.files[0].filename;
          res.send({code:200,message:'上传成功',url:filepath})
        }else{
          console.log(err);
          res.send({code:-1,message:'上传失败'})
        }
      })
    })