Node.js currently uses frameworks such as Express, KOA, and nest.js and egg.js respectively. Nest. js is said to be comparable to Java String. Express and KOA are personal or toy things, just learn them. The latter two frameworks are better than the.egg.js thinkPHP shadow (which is probably why I chose egg.js) and the cNode site has both versions of egg.js and the version opens milliseconds faster than the Express version. If you do what forum can be directly github to find cnode this author calculate the market is good, put their own website business logic what are open. But even if it’s public, it won’t affect him much. After all, he can run it

Express is a little bit older, but it’s a little bit easier to use than async Awiat

So much, but also to the novice a reference, and some new companies in the choice of a framework on a suggestion

Here’s what to say about the upload of the city egg.js.

First of all, we have

Router. Post ('/upload',controller.upload.index);Copy the code

Create a new upload file in Controller

'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; // The pipe reads a wormhole. const sendToWormhole = require('stream-wormhole'); // use egg-multipart const md5 = require('md5'); class UploadController extends Controller { async index() { const ctx = this.ctx; // Egg-multipart already handles file binary objects // node.js and PHP uploads. The only difference is, Const stream = await ctx.getfilestream (); PHP is transferring a temporary file // node.js like any other language (Java c#) const stream = await ctx.getfilestream (); Const filename = md5(stream.filename) + path.extName (stream.filename).tolocalelowerCase (); // Create a new filename 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); // Generate a file to write to the file stream const writeStream = fs.createWritestream (target); Try {// write the file stream to await awaitWriteStream(stream.pipe(writeStream)); } catch (err) {// If there is an error, close the pipe await sendToWormhole(stream); throw err; } // File response ctx.body = {url: '/public/uploads/' + filename}; } } module.exports = UploadController;Copy the code

The antD upload component is used here, as well as the egg + React framework built by the city itself, which is similar to Laravel’s. We don’t use egg server renderings, because doing so would be like breaking the React + Webpack tradition, because when working with next.js you sometimes have to turn axios into Node.js crawlers

Github.com/rainbowMore… Here is the city address, you can refer to

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 = ( <div> <Icon type={this.state.loading ? 'loading' : 'plus'}/> <div className="ant-upload-text">Upload</div> </div> ); return ( <Upload name="avatar" listType="picture-card" className="avatar-uploader" showUploadList={false} action="/upload" beforeUpload={this .beforeUpload .bind(this)} onChange={this .handleChange .bind(this)}> {this.state.imageUrl ? <img src={this.state.imageUrl} alt=""/> : uploadButton} </Upload> ); } } export default withRouter(UploadThumb);Copy the code