week7-day2

文件上传

• 前端

  <!-- 上传头像 -->
  <input type="file" name="headerImg" /><br/>
  
  let headerImgFile = headerImgInput.files[0] // 文件对象  多个文件的第一个
  // console.log(headerImgInput.files[0]);
  
  let formDate = new FormData()    //使用已有的表单来初始化一个对象实例
  //formDate.append('username',username)  调用append()方法来添加数据
  formDate.append('headerImg',headerImgFile)   
  
  let res = await axios({
   method: 'post',
   url: 'http://10.7.162.73:3000/user/upload',
   headers:{'content-type':'multipart/form-data'},
   data: formDate,
  })
  console.log(res.data)
  

• 后端

  安装 multer  
  npm i multer
  
  const multer = require('multer') // 1 引入multer
  // const multerUpload = multer({dest:'public/upload'}) // 2. 实例化multer上传对象
  const storage = multer.diskStorage({
  	destination: 'public/upload',  // 存储目录
  	filename: function (req, file, cb) {
  		cb(null, Date.now() + '.jpg') //文件名
  	},
  }) // 2. 实例化multer上传对象
  const multerUpload = multer({storage})
  

-路由使用

  /**
   * 文件上传接口
   * /user/upload
   */
  router.post('/upload', multerUpload.single('headerImg'), (req, res, next) => {
  	console.log(req.file)
  	console.log(req.body)
  	res.send({
  		code: 1,
  		file: req.file,
  		body: req.body,
  	})
  })