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;
