React上传照片

一、把图片转换成base64

描述：把图片转换成base64，然后在发送给后台，并且在页面中，展示图片；展示的图片可以直接使用Base64码。

import React,{Component} from 'react';
//yong es6构建一个类，来继承下面的组件 
export default class Images extends Component {
    // 图片组件
    constructor(props){
        super(props);
        this.state={
            img:''
        }
    }
    // huo取上传的图片，最后放到屏幕
    filrChange=()=>{
        // 获取文件的属性files
        let picDiv = document.getElementById("images").files[0];//xian获取一个
        // 给一个判断，没上传 神魔都不做
        if(!picDiv) return;

        // 打印这个文件看一哈
        console.log(picDiv);//拿到这个图片对象：File {name: "163.png", lastModified: 1584158929773, lastModifiedDate: Sat Mar 14 2020 12:08:49 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 641604, …}
        //从获取的文件对象中，获取图片数据（获取当前图片的Base64码）
        let filerReader = new FileReader();
        //把你得到的图片放进来
        filerReader.readAsDataURL(picDiv);
        //触发加载完成这个事件
        filerReader.onload = ev =>{
            // 拿到Base64码，然后创建图片
            this.img = new Image();//把这个图片挂载到一个实例上
            let img=ev.target.result;//这个事件源里 就是Base64码
            //把图片展示出来
            console.log(img);
            this.setState({
                img:img
            })
        }
    }
    render() {
        
        return (
            <div>
               {/* 展示图片 */}
                <div>
                    <img src={this.state.img} alt=""/>
                </div>
                {/*  */}
                <div className='buttonBox'>
                    {/* 图片上传的方式 */}
                    {/* 先把选择文件给阴藏了   （file支持上传多个）*/}
                    <input type="file" accept='image/*'
                    id="images"
                    onChange={this.filrChange}
                    
                    />
                </div> 
            </div>
        )
        
    }
}