• npm install
• gulp
• open http://localhost:8080

一开始遇到这个问题时，我是这样定位它的：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指向的路径中去。

我搜索：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`部分。
因为`const request = require("superagent");`所以我搜索：superagent，得到以下结果：

• superagent 是一个轻量的,渐进式的ajax api,可读性好,学习曲线低,内部依赖nodejs原生的请求api,适用于nodejs环境下. 另外关于end方法的参数，我发现有两个版本：

1. 两年前的版本：

 .end(function(res){
     if (res.ok) {
       alert('yay got ' + JSON.stringify(res.body));
     } else {
       alert('Oh no! error ' + res.text);
     }

2. 最新的：

.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", ......},猜想正确!!恩，总结完毕，碎觉觉哈哈！！！