前端Ajax后端Express+multer实现多文件上传

• 业务描述

某项目需要从一批shp文件，并从中提取信息。

• 前端页面

<form id="form1" action="#" method="POST" enctype="multipart/form-data">
  <div class="info">
	<label for="stage">期数</label>
	<input type="text" id="stage" name="stage"><br>
	<label for="time">时间</label>
	<input type="text" id="time" name="time"><br>
	<label for="annotation">annotation</label>
	<input type="text" id="annotation" value="month" name="annotation">
  </div>
  <div class="files">
	<label for="xzgd">新增供地</label>
	<input type="file" id="xzgdfile" name="xzgd" multiple="multiple"><br>
	<label for="xzpd">新增批地</label>
	<input type="file" id="xzpdfile" name="xzpd" multiple="multiple"><br>
	<label for="gewy">供而未用</label>
	<input type="file" id="gewyfile" name="gewy" multiple="multiple"><br>
	<label for="pewg">批而未供</label>
	<input type="file" id="pewgfile" name="pewg" multiple="multiple"><br>
  </div>
  <div class="submit">
	<input type="button" value="上传" onclick="upload()">
  </div>
</form>

• 前端逻辑

upload中会对数据做一些检查

$.ajax({
  type: 'POST',
  dataType: 'json',
  url: '/你的接口地址',
  data: new FormData($('#form1')[0]),
  processData: false,
  contentType: false,
  success: result => {
	alert(result.msg)
  },
  error: err => {
	alert('上传数据发生错误！')
  }
})

• 后端逻辑

安装中间件 

npm i multer

指定缓存路径

// 确保路径存在
if(!fs.existsSync(tempDataPath)) {
    fs.mkdirSync(`./${tempDataPath}`)
}
const update = multer({
    dest: tempDataPath // 缓存路径
})

 文件接收及处理

router.post('/你的接口', update.fields([
    {name:'xzpd'},
    {name:'xzgd'},
    {name:'pewg'},
    {name:'gewy'}
]), async function (req, res) {
    // 解析参数
    const { body: stageInfo, files } = req
    const { stage, time, annotation } = stageInfo
    //...
}