FileReader用于图片转换_filereader 转图片-CSDN博客

这篇博客详细介绍了在React应用中如何处理文件上传，特别是图片上传，并将其转换为Base64和二进制字符串。通过使用FileReader API，作者展示了如何监听文件读取的onloadend事件来更新组件状态，并在用户选择文件后展示图片预览。同时，文章还涵盖了图片转二进制的实现，这对于理解前端如何处理文件上传和数据转换至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from ‘react’

export class List extends Component {
state = {
img: ‘’,
data: ‘’
}

onclick = () => {
    console.log(this.state.data);
}



getImageUrl = e => {
    // e.target.files:上传文件的信息
    // console.log(evt.target.files[0]);
    //实例化一个FileReader
    var fr = new FileReader()
    //该事件在读取操作结束时 （要么成功 要么失败） 触发
    fr.onloadend = e => {
        // console.log(e.target.result,1);
        // e.target.result:拿到图片的 base64 格式
        this.setState({
            img: e.target.result
        })
    }

    //将文件读取为 DataURL （二进制流形式）
    fr.readAsDataURL(e.target.files[0])
}

// 图片专二进制
onReadAsBinarySting = e => {
    //必须重新 new 一个新实例
    const fr = new FileReader()
    //该事件在读取操作结束时 （要么成功 要么失败） 触发
    fr.onloadend = e => {
        this.setState({
            data: e.target.result
        })
    }
    fr.readAsBinaryString(e.target.files[0])
}

onChange = e => {
    //读取图片 URL
    this.getImageUrl(e)
    //图片 转 二进制
    this.onReadAsBinarySting(e)
}

render() {
    return (
        <div>
            <input type="file" onChange={this.onChange} />
            <img src={this.state.img} alt="" />
            <button onClick={this.onclick} >上传</button>
        </div>
    )
}

}

export default List