Javascript 图像预览在react中不起作用

我正在尝试下面的图像预览。 每当调用onChange函数ImagePreview时，change函数没有响应。运行控制台.log（“外部读取URL”）后，它被卡住了。我不明白为什么会发生这种事。 有什么帮助吗

import React, { Component } from 'react'; 

class ImagePreview extends Component {
   constructor(props) {
     super(props);
     this.state = { images_attributes: [], imgSrc:'' };
   }
   fileUpload() {
     $("#new_post_image").click();
   }
   imageChange() {
    function readURL(input) {
      console.log("bla");
      var file = this.state.images_attributes[0].files[0];
      if(this.state.images_attributes[0].files[0]) {
        var reader = new FileReader();
        // var url = reader.readAsDataURL(file.name);

        console.log(file);

        // console.log(reader);

        reader.onloadend = () => {
          console.log(reader);
          console.log(reader.result);
        }
      }
    }

    console.log("outside readURL");
    $("#new_post_image").change(function() {
      console.log("above readURL");
      readURL(this);
    });

    // if(file.name) {
    //   this.setState({
    //       imgSrc: file.name
    //   })
    // }
  }
   render() {
     <form>
       <img src={this.state.imgSrc} />
       <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />
       <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>
         <i className="fas fa-camera"></i>
         <label className="camera-text"><h4 className="camera-text">Image</h4></label>
       </button>
     </form>
   }
}
export default ImagePreview;

import React，{Component}来自'React'；
类ImagePreview扩展组件{
建造师（道具）{
超级（道具）；
this.state={images\u属性：[]，imgSrc:'}；
}
fileUpload（）{
$（“#新建#发布#图像”）。单击（）；
}
imageChange（）{
函数readURL（输入）{
控制台日志（“bla”）；
var file=this.state.images_属性[0]。文件[0]；
if（this.state.images\u属性[0]。文件[0]）{
var reader=new FileReader（）；
//var url=reader.readAsDataURL（file.name）；
console.log（文件）；
//控制台日志（读卡器）；
reader.onloadend=（）=>{
控制台日志（读卡器）；
console.log（reader.result）；
}
}
}
log（“外部读取URL”）；
$（“#新建#后期#图像”）。更改（函数（）{
log（“高于readURL”）；
readURL（this）；
});
//if（file.name）{
//这是我的国家({
//imgSrc:file.name
//   })
// }
}
render（）{
{this.state.images_attributes[0]=input}}/>
形象
}
}
导出默认图像预览；

使用此代码并尝试：

imageChange(e) {
   e.preventDefault(); 
   let reader = new FileReader();
   let file = e.target.files[0];

   reader.onloadend = () => {
     this.setState({
       file: file,
       imagePreviewUrl: reader.result
     });
   }

  reader.readAsDataURL(file)
 }

替换渲染方法：

render() {
 <form>
   <img src={this.state.imagePreviewUrl} /> // in constructor don't initilazie with array instaed with blank string
   <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />
   <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>
     <i className="fas fa-camera"></i>
     <label className="camera-text"><h4 className="camera-text">Image</h4></label>
   </button>
 </form>
 }

render（）{
//在构造函数中，不要使用带有空白字符串的数组初始化
{this.state.images_attributes[0]=input}}/>
形象
}

使用此代码并尝试：

imageChange(e) {
   e.preventDefault(); 
   let reader = new FileReader();
   let file = e.target.files[0];

   reader.onloadend = () => {
     this.setState({
       file: file,
       imagePreviewUrl: reader.result
     });
   }

  reader.readAsDataURL(file)
 }

替换渲染方法：

render() {
 <form>
   <img src={this.state.imagePreviewUrl} /> // in constructor don't initilazie with array instaed with blank string
   <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />
   <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>
     <i className="fas fa-camera"></i>
     <label className="camera-text"><h4 className="camera-text">Image</h4></label>
   </button>
 </form>
 }

render（）{
//在构造函数中，不要使用带有空白字符串的数组初始化
{this.state.images_attributes[0]=input}}/>
形象
}