一开始遇到这个问题时，我是这样定位它的：node.js upload image
一番搜索后我得到这样的解决办法，引入express multer中间件
注：Multer是一个nodejs中间件，用来处理http提交multipart/form-data，也就是文件上传。它是在busboy的基础上开发的。
<form method='post' action='/upload' enctype='multipart/form-data' >
<input type="file" name='file1'/>
<input type="submit" value="add"/>
</form>
enctype是用来规定将form发送到服务器之前如何进行编码的，有以下三种值：
application/x-www-form-urlencoded:(默认)发送前将空格变为+,特殊字符转换为 ASCII 十六进制值multipart/form-data:不进行编码text/plain:只把空格变为+，不不编码特殊字符
var multer = require('multer');
var upload = multer({dest: 'public/images/'});
router.post('/upload',upload.any(),function (req,res,next) {
res.send(req.files);
})
上面的代码发送post请求后，在后台这样处理,req.files就是接受到的文件，此方法会将文件上传到dest指向的路径中去。
BUT！！！当我将上述代码引入到一个react项目中时，这种做法是行不通的
我搜索：react express multer,得到的大多是一些没有意义的解答，于是我开始重新定位这个问题，搜索：express react upload image,搜索到很多中方法，但归根结底都是为type="file"的input输入框绑定一个onChange事件，然后e.target.files[0]就可以取到这个文件，类型为Object,然后将这个Object类型的东西发送给服务器。
那么问题来了，我想要上传一个文件到项目里，显然，现在发送回来的东西并不能直接上传！
app.put("/upload", function(req, res){
req.busboy.on("file", function(fieldName, file){
console.log(fieldName, file);
res.send(path);
});
req.pipe(req.busboy);
});
在控制台打印file时，发现它的类型是fileStream,那么，我当前要做的，一定是将stream转换为file本身,于是我搜索：node.js stream to file
直到找到fs.createReadStream可以解决这个问题：
于是，我改写了自己的代码：
app.put("/upload", function(req, res){
req.busboy.on("file", function(fieldName, file){
const path = __dirname + "/public/" + 'test.jpg';
var writeStream = require('fs').createWriteStream(path)
file.on('data', function(data) {
writeStream.write(data)
});
file.on('end', function() {
writeStream.end();
});
file.on('error', function(err) {
console.log('something is wrong :( ');
writeStream.close();
});
res.send(path);
});
req.pipe(req.busboy);
});
接下来，这个demo调试成功我将它引入我的项目中，就在我以为大功告成的时候，新的bug站起来了，明明demo里可以跑通的代码，拿到项目里就挂！！！
request.put("/upload")
.attach("image-file", this.state.image, this.state.image.name)
.end(function(res){
console.log(res);
});
我在服务器端send了path,返回给页面后，前端打印了res,但是demo里可以成功打印接受到的东西，项目里打印的一直是null
于是我在服务器端返回res.send('success!')，打印的依然是null，接着我查看network,发现``Headers里Request URL为http://localhost:4000/upload的response的确成功返回了路径信息，也就是说我的后台部分没有问题，问题出现在前端部分，且出现在request.put部分。<br/>因为const request = require("superagent");`所以我搜索：superagent，得到以下结果：
- superagent 是一个轻量的,渐进式的ajax api,可读性好,学习曲线低,内部依赖nodejs原生的请求api,适用于nodejs环境下.
另外关于end方法的参数，我发现有两个版本：
- 两年前的版本：
.end(function(res){
if (res.ok) {
alert('yay got ' + JSON.stringify(res.body));
} else {
alert('Oh no! error ' + res.text);
}
- 最新的：
.end(function(err, res){
if (err || !res.ok) {
alert('Oh no! error');
} else {
alert('yay got ' + JSON.stringify(res.body));
}
对比两个版本，我的猜想是：由于我代码中是一个参数，所以；它默认res第一个参数err,因为请求和响应是成功的，所以打印的err一直是null,然后我做了以下验证：
.end(function(err, res){
console.log(err);
console.log(res);
果然，打印的结果为：null ,Response {req: Request, xhr: XMLHttpRequest, text: "/home/cyr/holiday-workspace/reactjs-image-upload/public/test.jpg", ......},猜想正确!!恩，总结完毕，碎觉觉哈哈！！！
网友评论