文件上传之前端将文件发送给后端服务器（四）

将文件上传给服务器的代码，给按钮 “ 上传到服务器 ” 添加的addEventListener() 事件：

//4. 上传文件到服务器
	upload_button_upload.addEventListener('click', function(){
		if(!_file){
			alert('请先选择需要上传的文件');
			return;
		}
		
		// 把文件传送给服务器 
		let formData = new FormData();
		// 通过append 方法将文件对象，信息传递给服务器
		formData.append('file', _file);
		
		instance.post('/api/home', formData).then(data => {
			if(+data.code === 0){
				alert('成功 ')
			}
			return Promise.reject(data.codeText);
		}).catch(reason => {
			alert('文件上传失败')
		});
		
	})

在上传服务器的过程中遇见常见的跨域问题：

解决跨域问题的三种处理代码：

注意需要将解决跨域问题的代码写在导入路由模块的前面，否则仍然会报错：

一：

// 导入 cors 中间件
const cors = require('cors')
// 将 cors 注册为全局中间件  
app.use(cors())

二：

//中间件
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!'): next()
})
app.use(bodyParser.urlencoded({
  extended: false,
  limit: '1024mb'
}))

三：

app.all("*",function(req,res,next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Authorization,X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method' );
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
  res.header('Content-Type', 'application/json;charset=utf-8');
  if (req.method == 'OPTIONS')
     res.sendStatus(200);  //让options尝试请求快速结束
  else
    next();
});

在服务器端的upload 文件夹下面就会有从前端上传的文件：