使用脚手架react-create-app

// 安装
npm install -g create-react-app
// 建项目
create-react-app your-app-name

这个命令创建一个react项目，使用yarn命令启动或编译。

使用react-react-app创建的项目，webpack配置文件是没有暴露出来的，需要使用命令 npm run eject 暴露webpack配置文件，

加密库 crypto-js

无论是md5，还是base64，或者sha等加密方式都有封装。

import CryptoJs from "crypto-js"
// md5
CryptoJs.MD5(str).toString();
//base64
CryptoJs.enc.Base64.stringify(str);
//sha1
CryptoJs.SHA1(str).toString();
//aes
CryptoJs.AES.encrypt

上传图片

图片上传，在上传前预览，或者base64编码。组件可用antd的Upload，

import {Upload} from "antd";

class RegMore extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            photo: '',
        }
    }
    
    chkPhoto = (file) => {
        let flag = true;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
            flag = false;
            showMsg('You can only upload JPG,PNG file!');
        } else if (file.size > 4 * 1024 *1024) {
            flag = false;
            showMsg('Image must smaller than 4MB!');
        }
        return flag;
    }
    
    setPhoto(data) {
        this.setState({photo: data});
    }
    // 上传图片。并不真的上传，而是读取图片内容保存在state中。读取的图片内容已经是base64。
    upimg = (detail) => {
        console.log(detail);
        let reader = new FileReader();
        reader.addEventListener('load', () => this.setPhoto(reader.result));
        reader.readAsDataURL(detail.file);
    }
    
    render() {
        const uploadButton = (
            <span className="upimgbg"></span>
        );
       
        return (
            ……
            <Upload name="1" listType="picture-card" showUploadList={false} beforeUpload={this.chkPhoto} customRequest={this.upimg}>
                {this.state.photo.length > 0 ? <img src={this.state.photo} alt="avatar" /> : uploadButton}
            </Upload>
            ……
        );
    }
}