react 前端通过FileReader实现本地图片的预览

项目场景：

react 前端通过FileReader实现本地图片的预览

---

解决方案

1.安装FileReader

npm install FileReader

2.FileReader实现

//对应upload组件的beforeUpload方法
getTextInfo1=(file)=> {
    
    
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (result) => {
    
    
      let targetNum = result.target.result;
      targetNum = targetNum.replace(/[\n\r]/g, '');//对获取的内容进行修改
      targetNum = targetNum.replace(/[ ]/g, '');//对获取内容进行修改
      //这里的targetNum已经是可以展示的图片地址了，提交的话上传文件是正常获取hapv这个file对象
     this.setState({
    
    imgsrc:targetNum,hapv:file})
    }
    return false;
  }

//imgsrc是FileReader转换的base64格式地址，upload组件是antd里的组件，这段代码是实现选中本地图片后预览该图片
{
    
    this.state.imgsrc!=''?<img src={
    
    this.state.imgsrc} width={
    
    400} height={
    
    200}/>:<div className={
    
    styles.imgDiv}>请上传半鸟瞰图</div>}
                   <div style={
    
    {
    
    marginTop:'10px'}}> <Upload action="" accept=".jpg,.png" beforeUpload={
    
    this.getTextInfo1} showUploadList={
    
    false}>
                    <Button>半鸟瞰图上传</Button>
                   </Upload></div></div>

---