Question

我已经使用reactjs来预览图像。但我没有得到如何预览或推送多图像预览。下面的代码工作正常，但如果我选择2个图像，那么它只显示第一个图像预览（替换第一个图像）。另外在我的控制台中，如果上传了2个图像，我得到文件长度2，但在显示图像细节时，它只显示第1个图像图像细节不是图像细节。请原谅我在编写代码时出现语法错误：

构造

export default class Test extends Component {

     constructor(props) {

       super(props);
        this.state = {
       imagePreviewUrl: ''
     }
   onChangeFile(event) {
     event.stopPropagation();
     event.preventDefault();
    // var file = event.target.files[0];
   // var index;

     let reader = new FileReader();
    let files = event.target.files;


     var index;
      console.log(files.length);
     for(index = 0;index<files.length;index++){
      var file = files[index];
      this.handleLoadImage(file);
    }
      console.log(file);
     this.setState({file}); /// if you want to upload latter
   }
  handleLoadImage  (file)  {
      var pictures = [];

     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
        // as a good practice, use a function to set state
        this.setState(() => ({
          imagePreviewUrl: reader.result,
        }));
        pictures.push({'image':file, 'imagePreviewUrl':reader.result});
      };
      reader.readAsDataURL(file);
    }
     console.log(this.state);
    console.log(pictures);
 }
 render() {
      return (
        <div>
                  <input id="myInput"
                         type="file"
                         ref={(ref) => this.upload = ref}
                        style={{display: 'none'}}
                        onChange={this.onChangeFile.bind(this)} multiple
                   />

    <Button
        label="Open File"
        primary={false}
       onClick={()=>{this.upload.click()}}
    >
    Upload
    </Button>
     <img src={this.state.imagePreviewUrl} height="40px"/>
        </div>
      )
     }
   }

如何在Reactjs中预览多个图像

0 个答案: