Как просмотреть выбранное изображение Загрузить React js

Question

Создана кнопка под названием «Загрузка изображения», для просмотра необходимо выбрать выбранное изображение

     <GridItem xs={6}>
        <FormControl className={classes.formControl}>
          <input
            accept="image/*"
            className={classes.input}
            style={{ display: 'none' }}
            id="raised-button-file"
            multiple
            type="file"
          />
          <label htmlFor="raised-button-file">
            <Button
              variant="raised"
              component="span"
              className={classes.button}
            >
              Upload Image
            </Button>
          </label>
        </FormControl>
      </GridItem>

Answer 1

вы можете установить URL объекта файла в состоянии во время onChange и использовать его в теге img, например,

const [file, setFile] = useState(undefined);

const handleChange = (event) => {
    setFile(URL.createObjectURL(event.target.files[0]));
  }

использовать этот метод handleChange в input onChange событие,

<GridItem xs={6}>
<FormControl className={classes.formControl}>
  <input
    accept="image/*"
    className={classes.input}
    style={{ display: 'none' }}
    id="raised-button-file"
    multiple
    type="file"
    onChange={handleChange}
  />
  {/* preview of file */}
  { file && <img src={this.state.file}/>}
  <label htmlFor="raised-button-file">
    <Button
      variant="raised"
      component="span"
      className={classes.button}
    >
      Upload Image
    </Button>
  </label>
</FormControl>
</GridItem>

также, если вы хотите разрешить пользователю обрезать выбранное изображение, есть эта библиотека act-image-crop . Я использую его, и он хорошо работает для меня.