使用腳手架react-create-app

// 安裝
npm install -g create-react-app
// 建項目
create-react-app your-app-name

這個命令創(chuàng)建一個react項目，使用yarn命令啟動或編譯。

使用react-react-app創(chuàng)建的項目，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});
    }
    // 上傳圖片。并不真的上傳，而是讀取圖片內(nèi)容保存在state中。讀取的圖片內(nèi)容已經(jīng)是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>
            ……
        );
    }
}