React实现上传图片及回显(hook与class)

本文介绍了一种使用React实现图片上传及实时预览的方法,包括Hook和Class两种实现方式。通过FileReader读取文件并转换为Base64格式进行显示。

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

React实现上传图片及回显

代码包括 Hook版和class版

import React, { useState,Component } from 'react'
function WebStyle(props) {
    const [ imgState, setimgState ] = useState(true);
    const [ imgData,setimgData ] = useState('');
    const _upImg = () => {
        let upimgs = document.getElementById("upimg")
        upimgs.click();
    }
    const upChange = (event) => {
        let imgfile = event.currentTarget.files[0];///获得input的第一个图片
        console.log('我是图片源文件',imgfile)
        if (imgfile.size > 1024000) {
            alert('大于了1m,请重新上传', 3)
            let upimgs = document.getElementById("upimg")
            upimgs.value=''
        }
        else {
            //使用readAsDataURL来进行回显图片
            let reader = new FileReader();//filereader.readasdataurl读取图像文件转换为流
            reader.readAsDataURL(imgfile);

            reader.onload = function (event) {//读取数据时会触发一个load事件
                let imgs = this.result
                console.log('我是回显的Base64图片文件',imgs)
                setimgState(false)
                setimgData(imgs)
            };
        }
    }
    return (
        <div className='page-body'>
            <button onClick={_upImg}>
                {
                    imgState?'上传':'重新上传'
                }
            </button>
            <div>
                <img src={imgData} style={{ width: '200px', height: '200px' }} />
            </div>
            <input id='upimg' type='file' style={{ display: 'none' }} accept='image/png' onChange={upChange} />
        </div>
    )
}

class WebStylec extends Component{
    constructor(props){
        super(props)
        this.state = {
            imgState:true,
            imgData:''
        }
    }
    _upImg = () => {
        let upimgs = document.getElementById("upimg")
        upimgs.click();
    }
    upChange = (event) => {
        let _this = this//烦人的this
        let imgfile = event.currentTarget.files[0];///获得input的第一个图片
        console.log('我是图片源文件',imgfile)
        if (imgfile.size > 1024000) {
            alert('大于了1m,请重新上传', 3)
            let upimgs = document.getElementById("upimg")
            upimgs.value=''
        }
        else {
            //使用readAsDataURL来进行回显图片
            let reader = new FileReader();//filereader.readasdataurl读取图像文件转换为流
            reader.readAsDataURL(imgfile);

            reader.onload = function (event) {//读取数据时会触发一个load事件
                let imgs = this.result
                console.log('我是回显的Base64图片文件',imgs)
                _this.state.imgState = false
                _this.state.imgData = imgs
                _this.setState(_this.state)
            };
        }
    }
    render(){
        return(
            <div className='page-body'>
            <button onClick={this._upImg}>
                {
                    this.state.imgState?'上传':'重新上传'
                }
            </button>
            <div>
                <img src={this.state.imgData} style={{ width: '200px', height: '200px' }} />
            </div>
            <input id='upimg' type='file' style={{ display: 'none' }} accept='image/png' onChange={this.upChange} />
        </div>
        )
    }
}

export default WebStylec

效果图效果图
思路就是
获取input的event,利用FileReader 进行读取,转换为Base64后进行回显

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值