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>

另外，如果您想允许用户裁剪所选的图像，则可以使用此库react-image-crop。我使用它并且它对我来说效果很好。