readAsDataURL Загрузка нескольких изображений ReactJS - PullRequest
Новая
       14

readAsDataURL Загрузка нескольких изображений ReactJS

0 голосов
/ 04 октября 2018

Добрый день, как я могу изменить свой код так, чтобы он принимал множественную загрузку изображений с предварительным просмотром, и пользователь мог удалить и установить основное изображение.

Мой код позволяет только одну загрузку изображения между прочим.

Это то, что у меня так далеко: 

_handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files;

    console.log('file', file);
    console.log('reader', reader);

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

  render(){
    let { imagePreviewUrl } = this.state;
    let $imagePreview = null;
    let path = Config.PROJECT_PATH + '' + Config.IMAGE.PATH + '' + this.props.imageModule + '/thumb/' + this.props.image;

    if (imagePreviewUrl) {
      $imagePreview = (<ThumbImage image={imagePreviewUrl} ref='myImage'/>);
    }
    else{
      if (this.props.image) {
        $imagePreview = (<ThumbImage image={path} />);
      }
      else{
        $imagePreview = (<ThumbImage image={defaultImage} />);
      }
    }
    return(
      <div>
        <div className="modal-image-preview">
          { $imagePreview }
        </div>
        <div className="modal-image-button">
          <form onSubmit={(e)=>this._handleSubmit(e)}>
            <RaisedButton style= {{ backgroundColor: '#000' }} containerElement='image' label="Choose an Image" labelPosition="before" onChange={(e)=>this._handleImageChange(e)}>
              <input type="file" style={styles.imageInput} multiple/>
            </RaisedButton>
          </form>
        </div>
      </div>
    );
  }

Ваша помощь очень ценится.

1 Ответ

0 голосов
/ 15 марта 2019

Чтобы загрузить изображения в свой код реакции, вам нужно, чтобы каждый путь в состоянии до Массив

А затем правильно измените setsets, используйте функцию map дляОбрабатывать состояние при рендеринге компонентов

...