首发掘金 记录一次node中台转发表单上传文件到后台过程 本篇跟掘金为同一个作者leung
公司几个项目都是三层架构模式即前台，中台(中间层)，后台。前台微信端公众号使用vue框架，后台管理前端使用react，中台(中间层)使用node，后台使用java。此次说的是后台关键上传数据文件时遇到的一个bug，因为是三层架构，前台表单会先提交到node中间层，然后再通过node中间层转发到java后台保存并读取文件数据。 此次遇到了一个bug当表单提交到node中间层的时候node接口request可以获取得到表单上传的文件信息，就在node端创建http请求转发到后台的时候后台报错了：the request was rejected because no multipart boundary was found后台收到的接口请求中得不到boundary信息，此时已确定node创建的http请求中headers中Content-Type为multipart/form-data，很显然java后台没收到上传文件信息，通过在页面创建form表单使用后台上传接口地址发现后台可以上传，这证明后台接口没问题，node中台接口也能收到form表单上传文件数据，那么范围进一步缩小问题就出现在node http请求转发到后台这步的问题了。既然后台接口请求体中没有boundary那么问题就出现在创建请求的时候少给了东西后台了，Google+百度了一下找到的解决方式在发现都不行，不能说完全没有用但是还是找到了方向。后台要的是表单数据，那node中台转发的时候就转发一个表单数据。于是找到了form-data这个包及connect-multiparty中间件。 先插入一段代码然后再分析；
node-fetch方式发送请求到后台
const fs = require('fs')
const path = require('path')
const FormData = require('form-data')
const express = require('express')
const fetch = require('node-fetch')
const router = express.Router()
const multipart = require('connect-multiparty');
var multipartMiddleware = multipart()
router.post('/uploadFile', multipartMiddleware, (req, res) => {
const { path: filePath, originalFilename } = req.files.file
const newPath = path.join(path.dirname(filePath), originalFilename) // 得到newPath新地址用于创建读取流
fs.rename(filePath, newPath, (err) => {
if (err) {
return;
} else {
const file = fs.createReadStream(newPath) //创建读取流
const form = new FormData() // new formdata实例
form.append('file', file) // 把文件加入到formdata实例中
fetch('后台接口上传地址like：https://ip:端口/接口', {
method: "POST",
body: form,
headers: form.getHeaders() // 这步非常重要一定要把formdata的headers放在请求体headers中我发现网上很多例子讲的都没这个headers，没有这个后台还是会报boundary的错因为boundary是在request headers中
}).then(res => res.json()).then(data => {
res.send({data: data}) //将上传结果返回给前端
})
}
})
});
这种方式没有使用node http请求使用到了fetch，只是一种请求方式，换成axios其实也是一样的，最主要的是发送请求的时候除了往formdata中append file文件信息外，headers一定要是formdata的headers不然后台还是接收不到request中的boundary。
node http方式发送请求到后台
const fs = require('fs')
const path = require('path')
const FormData = require('form-data')
const express = require('express')
var http = require('http');
const router = express.Router()
const multipart = require('connect-multiparty');
var multipartMiddleware = multipart()
router.post('/uploadFile', multipartMiddleware, (req, res) => {
const { path: filePath, originalFilename } = req.files.file
const newPath = path.join(path.dirname(filePath), originalFilename) // 得到newPath新地址用于创建读取流
fs.rename(filePath, newPath, (err) => {
if (err) {
return;
} else {
const file = fs.createReadStream(newPath) //创建读取流
const form = new FormData() // new formdata实例
form.append('file', file) // 把文件加入到formdata实例中
var request = http.request({
method: 'post',
host: 'http://ip:port',
path: '/xxxx', //上传接口
headers: form.getHeaders() //formdata的headers
});
form.pipe(request);
request.on('response', (response) => {
res.send({data: response})
});
}
})
})
这种方式使用的是node中http方式，相关注意事项其实跟node-fetch差不多只是发送的差别而已。
其实项目中我们是把请求方式http单独抽取到一个文件中的这样方便管理，这里只是为了方便说明情况把它放到node中台接口中。其实不管是哪种方式都是换汤不换药的都是将append后formdata中的文件信息同时还有formdata headers发送到后台接口就可以了。
今天周末有时间总结一下，最后如果有不对的地方希望大家指正一起学习，谢谢！
首发掘金 记录一次node中台转发表单上传文件到后台过程 本篇跟掘金为同一个作者leung