egg.js 上传文件

现在node.js 使用的框架有 Express，koa 还有分别基于nest.js 和 egg.js 。据说nest.js 可以和 java 的 String 有得一比。
express 和 koa 属于 个人或者玩具的东西，学习一下就好了。
后面两个框架的话，都比较好.egg.js thinkphp 的影子[可能这就是我选择egg.js的原因]
还有就是cnode 这个网站 两个版本都有
egg.js 和 版本会比 express的版本 打开快那么几毫秒。
如果做论坛什么的话
可以直接区 github 上找cnode 这个作者算市不错了，把自己的 网站 业务逻辑什么都公开了。
不过就算公开对他也妹多大的影响，毕竟他会运营 哈哈哈

而 express 的话 比较老了，不过还是比较好用的 比较有了 async awiat 后

所这么多，也是给新手一个参考，和一些新型公司在选择框架上一个建议吧

这里这要说的市egg.js 的上传。

首先我们在

#route.js中添加一个路由规则
router.post('/upload',controller.upload.index);

在controller中新建upload文件

'use strict';

//node.js 文件操作对象
const fs = require('fs');
//node.js 路径操作对象
const path = require('path');
//egg.js Controller
const Controller = require('egg').Controller;
//故名思意 异步二进制 写入流
const awaitWriteStream = require('await-stream-ready').write;
//管道读入一个虫洞。
const sendToWormhole = require('stream-wormhole');
//当然你也可以不使用这个 哈哈 个人比较赖
//还有我们这里使用了egg-multipart
const md5 = require('md5');

class UploadController extends Controller {

    async index() {
        const ctx = this.ctx;
        //egg-multipart 已经帮我们处理文件二进制对象
        // node.js 和 php 的上传唯一的不同就是 ，php 是转移一个 临时文件
        // node.js 和 其他语言（java c#） 一样操作文件流
        const stream = await ctx.getFileStream();
        //新建一个文件名
        const filename = md5(stream.filename) + path
            .extname(stream.filename)
            .toLocaleLowerCase();
        //文件生成绝对路径
        //当然这里这样市不行的，因为你还要判断一下是否存在文件路径
        const target = path.join(this.config.baseDir, 'app/public/uploads', filename);
        //生成一个文件写入 文件流
        const writeStream = fs.createWriteStream(target);
        try {
            //异步把文件流 写入
            await awaitWriteStream(stream.pipe(writeStream));
        } catch (err) {
            //如果出现错误，关闭管道
            await sendToWormhole(stream);
            throw err;
        }
        //文件响应
        ctx.body = {
            url: '/public/uploads/' + filename
        };
    }
}

module.exports = UploadController;

这里使用的是 antd 的上传组件
还有就是 这里我使用的市自己搭建的一个 egg + react 框架，思路和 laravel 的差不多。
并没有使用 egg的服务端渲染，因为这样做的话，就像违背了 React + webpack 的传统，因为在使用next.js的时候 有时候的axios 的思路 你就要变成 node.js的 爬虫思路

https://github.com/rainbowMorelhahahah/egg-react-webpack-react-router
这里市地址，可以参考下

import React, {PureComponent} from 'react';
import {withRouter} from 'react-router-dom';

import {Upload, Icon, message} from 'antd';

class UploadThumb extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            imageUrl: ""
        };
    }

    handleChange(info) {
        const {imageUrl} = this.state;

        if (info.file.status === 'uploading') {
            this.setState({loading: true});
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({imageUrl, loading: false}));
        }
    }

    getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

    beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        if (!isJPG) {
            message.error('You can only upload JPG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJPG && isLt2M;
    }

    render() {

        const uploadButton = (
            

                
                
Upload
            
        );

        return (
            

                {this.state.imageUrl
                    ? 
                    : uploadButton}

            
        );
    }
}

export default withRouter(UploadThumb);