时间戳

首页 > 解决方案 > 在上传之前尝试预览图像

html - 在上传之前尝试预览图像

问题描述

我正在尝试使用页面上的文件类型输入来呈现用户选择的图像，因此用户将在提交和上传图像之前预览图像，但我无法获得它的值。

我一直在尝试做的是使用输入的值作为<img />组件的来源：

import React, { useState } from "react";

export default function Test() {
  const [image, setImage] = useState(null);
  return (
    <div>
   <form  onSubmit={() => {
      //Sumbit
    }}/>
    <input
      type="file"
      onChange={(e) => setImage(e.target.value)}
    ></input>
    {image ? <img src={image} /> : null}
    <button type={"submit"}></button>
  </form>
    </div>
  );
}

但它总是返回一个值 - C:\fakepath\IMGName。有什么方法可以获取图像的值，以便我可以将其渲染为图像？

标签： htmlreactjs

解决方案

export default function App() {
  const [img, setImg] = useState(null);

  const handleImg = (e) => {
    setImg(URL.createObjectURL(e.target.files[0]));
  }

  return (
    <div className="App">
      <input type="file" onChange={handleImg} />
      <img src={img}/> 
    </div>
  );
}

推荐阅读