后端存session 后端存图片方案

    写毕设时，虽然前端能将图片文件上传到服务器，服务器又将图片文件保存在相应的本地文件夹下，但是在数据库保存的图片路径，绝对路径有问题。有两种方法：

一.将图片存储在前端项目文件夹中

绝对路径： 写成绝对路径，比如 C:\hzpcactus\campus-social\static\kkrtajmWdpK148cu1a_5t4EN.jpg ，界面最后提示Not allowed to load local resouce报错；
相对路径： 写成相对路径，因为后台服务器保存图片文件是相对于服务器项目的地址，应该用到 “../“或”./”，然后前端打开时，相对路径又是相对于前端项目的地址。所以，需要后台在保存图片的时候直接存到前端项目的文件夹中，然后前端代码将接收到的路径改成前端项目的相对地址。
然后你可以将图片以base64格式存储到数据库中，而也可以像我一样存个图片的地址，后台图片存储我用的是multiparty对象，也可以用multer。具体用法可自行百度。后台代码如下，

//上传个人头像图片
router.post('/upload/headImage', function(req, res, next) {
  let form = new multiparty.Form();
  //form.uploadDir="193.9.139.13:8080/cactusImage";
  var path = require('path');
  form.uploadDir=path.resolve(__dirname,'../../campus-social/static');
  console.log(form.uploadDir);
  form.keepExtensions=true;   //是否保留后缀
  form.autoFiels=true;       //启用文件事件，并禁用部分文件事件，如果监听文件事件，则默认为true。
  form.parse(req,function(err,fields,files){  //其中fields表示你提交的表单数据对象，files表示你提交的文件对象
    if(err){
      res.json({
        status:"1",
        msg:"上传失败！"+err
      });
    }else{
      res.json({ 
        status:"0",
        msg:"上传成功！",
        personPicture: files.file[0].path   //存到数据库中的picture的路径（绝对路径）
      });
    }
  });  
  
});

我们通过后台得到的图片路径传给前端，然后前端将form表单填写完，一并传给数据库，数据库收到结果，如图

前面讲到，虽然前端用绝对路径会报错，但是前端接收图片地址后，可以将地址改成相对地址，也可以后台在传之前将其修改相对路径，这里我给大家都列举出来

//nodejs后台修改路径
person_picture="static"+ person_picture.split("static")[1];

//vue前端中利用localStorage缓存图片地址
this.imgUrl =window.localStorage.getItem("personPicture")? "static"+ window.localStorage.getItem("personPicture").split("static")[1]:"";

最后前端最终的到的路径就是“static/…jpg”

二.利用 Express 托管静态文件

可以将图片保存在后台项目文件夹中，一般放在public中images文件夹里。

可以在app.js中添加app.use(express.static(‘public’))，通过如上代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

http://localhost:3000/images/picture.jpg，数据库中存储的图片地址就是这种格式

前端Img的src地址也是。后台代码如下，

//上传个人头像图片
router.post('/upload/headImage', function(req, res, next) {
  let form = new multiparty.Form();
  var path = require('path');
  form.uploadDir=path.resolve(__dirname,'../public/images');
  console.log(form.uploadDir);
  form.keepExtensions=true;   //是否保留后缀
  form.autoFiels=true;       //启用文件事件，并禁用部分文件事件，如果监听文件事件，则默认为true。
  form.parse(req,function(err,fields,files){  //其中fields表示你提交的表单数据对象，files表示你提交的文件对象
    if(err){
      res.json({
        status:"1",
        msg:"上传失败！"+err
      });
    }else{
      res.json({ 
        status:"0",
        msg:"上传成功！",
        personPicture: "http://localhost:3000"+files.file[0].path.split("public")[1]
      });
    }
  });  
  
});

前端直接获取数据库图片地址就OK