背景
在上一篇文章中，最后追踪发现一个问题，在Node端上传FormData的时，发现构造好的FormData Header boundry与之前request 获取的Header boundry不一致，造成了图片上传无响应。
问题解决
1.解决Header boundry不一致问题
在node端使用的form-data库，使用fs createReadStream之后，append到formdata上。代码如下：
// 对转到node端之前存下的request进行处理
const form = new formiddle.IncomingForm();
// req 拦截web请求存下来的requset
form.parse(req, function(err, fields, files) {
if (err) return err;
const file = fs.createReadStream(files.file.filePath);
const formData = new FormData();
formData.append('file', file);
return formData;
})
后面使用fetch进行上传时，才发现经过这样的一直转换，formdata中的header已与之前req中的header boundry不同。所以需要我们重新从formdata中获取header再与req中header assign。解决方法：
在上传图片时：
if (formData.getHeaders) {
Object.assign(req.headers, formData.getHeaders());
}
这样就匹配了formdata中的boundry。具体信息可参考以下这篇文章：
node formData
- 解决文件结构改变问题
解决了第1个问题后，发现有时候还是不能上传，发现有可能是因为经过fs.createReadStream之后，文件的结构可能于之前不一致了。于是对file的name做了二次赋值：
const file = fs.createReadStream(files.file.filePath);
file.name = files.file.name
这样保证了file的结构一致性，上传也终于成功了。以为终于大功告成了，但却发现上传有些图片可以成功，有些图片却不行。再一次重新check上传好的数据，发现真的是没有其它问题了，这个时候怀疑service应该出问题了。
后续：
在等待几天之后，service最终确认问题是一个记日志的功能与上传图片的功能冲突了。造成了有时候可上传，有时候却不行的问题。最后决定重开一个service专门做图片上传功能，直接在browser端获取url上传，也不需要再走一次node，这样避免了service冲突的问题。
收获：
虽然最后启用了另开一个service的方案，之前的方案取消了。但这次调试收获很大：
- 对项目的
SSR流程有了一个整体较清晰的了解 - 对
node端有了一定程度的了解学习，学习并使用了formiddle等库 - 对formdata有了深入的学习，并学习了三方封装的
formdata库，以前对这个只是有个概念，在读了一遍源码后，对其已经比较了解了。
网友评论