hu-yan-123
1:解决后端的上传支持(图片是一种数据流  不是普通的数据   一个汉字两个字节   512个汉字=1Kb )
后端需要中间件
npm  i   multer  -save

2:在后端项目中新建了一个文件夹until   新建一个multer.js的文件   里面写入上传的核心功能
  一个图片存放的地址   两个是图片的重命名
//设置multer
var multer = require("multer");
var path = require(\'path\');
var storage = multer.diskStorage({
    //设置上传路径
    destination: function (req, file, cb) {
        //path.join(__dirname, \'public/views\')
        cb(null, path.join(__dirname, \'../public/uploads\'));
    },
    // destination:path.join(__dirname, \'public/uploads/\'),
    //设置上传后文件的名称
    filename: function (req, file, cb) {
        var fileList = (file.originalname).split("."); //名称拆分获取名称和文件后缀
        //console.log(file);
        var newName = fileList[0]+ "-" + Date.now() + "." + fileList[fileList.length - 1];
        //为了方式重复的名称出现  我们采用名称+时间戳+文件后缀名
        cb(null, newName);
    }
});
var upload = multer({
    storage: storage
});
//导出公共的方法
module.exports = upload;
3:需要到public文件夹里面新建一个文件夹 uploads 用来放上传的图片

4:在项目里面新建一个文件夹config   里面新建一个文件index.js   里面放的全局的配置信息
let  info  ={
    baseURL:"http://localhost:3000"
}

module.exports = info;

5:回到router文件夹下面的index.js中  完成图片上传的接口
var express = require(\'express\');
var router = express.Router();
let  upload = require("../until/multer");
let  config  = require("../config");

/* GET home page. */
router.get(\'/\', function(req, res, next) {
  res.render(\'index\', { title: \'Express\' });
});
//filename 只是表单中name的名称
router.post("/uploads",upload.array(\'filename\'),(req,res)=>{
 //如果图片上传成功  返回图片上传的地址
  res.json({
    code:1,
    url:config.baseURL+"/uploads/"+req.files[0].filename,
  })
})

module.exports = router;

 

分类:

技术点:

相关文章:

  • 2021-12-12
  • 2021-12-12
  • 2021-12-12
  • 2021-12-11
  • 2021-06-13
  • 2021-12-12
  • 2022-12-23
猜你喜欢
  • 2021-12-12
  • 2021-12-12
  • 2021-12-12
  • 2021-12-12
  • 2021-12-12
  • 2021-12-12
  • 2021-07-22
相关资源
相似解决方案