React 使用fromidable 模块进行文件上传出现First argument must be a string 的解析错误的原因

前几日在用react + express做网站文件上传模块时采用了常用的几个后台处理文件上传的模块,几乎每个都会出现上述错误,究其原因,以如下代码进行调试测试

//错误提示调试


//new一个formidable.IncomingForm();
var form = new formidable.IncomingForm();
//设置临时文件存放的路径
form.uploadDir = "public/";
//设置上传数据的编码
form.encoding='utf-8';
//设置是否保持上传文件的拓展名
form.keepExtensions = true;


form.on('error',function(err) {
console.log('errr!!!!!!!!!!!!!!');
res.write('xxxx');
res.end();
}


form.parse(req,function(err,fields,files) {
res.writeHead(200,{'content-type': 'text/plain'});
res.write('received upload:\n\n');
res.end();
});


此时看到

Can't set headers after they are sent,因为react的做法是以组件的形式进行开发的,所以将上传文件那块html直接放在html页面中就不会出错,react 写法如下:


return(<div>
<AppMenu/>
<h1>文件上传</h1>
<form method="post" enctype="multipart/form-data" action="/upload">
<input type="text" name="text"/>
<br/><br/>
<input type="text" name="ss"/>
<br/><br/>
<input type="file" name="f"/>
<br/><br/>
<input type="submit" value="提交"/>
</form>


</div>


)

初步怀疑此return 出错,上传模块以前以为是不兼容的问题,我express是4.13.4,算是新版本了,找到了问题所在再继续解决,以此作为题记,后续会补充解决方案.

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...