图像预览在反应中不起作用答案

【问题标题】：image preview is not working in react图像预览在反应中不起作用
【发布时间】：2018-09-16 07:57:27
【问题描述】：

我正在尝试以下内容进行图像预览。每当调用 onChange 函数 ImagePreview 时，change 函数 没有响应。运行 console.log("outside readURL") 后卡住了。我无法弄清楚为什么会这样。有什么帮助吗？

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;

【问题讨论】：

标签： javascript image reactjs onclick onchange

【解决方案1】：

使用此代码并尝试：

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>
 }

【讨论】：