时间戳

首页 > 解决方案 > 是否可以显示已由输入元素选择的图像？

javascript - 是否可以显示已由输入元素选择的图像？

问题描述

我希望显示输入元素的选定图像。这可以在本地文件上执行，访问图像客户端，还是我需要将图像上传到服务器？

这是我在 React 中的尝试。我可以使用inputElem.files[0].name. 一旦我尝试为其设置图像元素，就会显示损坏的图像图标，并且不会出现任何错误。

const App = () => {
  // state to keep track of img elements src. The default works fine.
  const [imgSrc, setImgSrc] = useState('/images/test.jpg')

  function handleImgUpload() {
    const url = '/images/' + e.target.files[0].name
    setImgSrc(url)
    console.log(url) // /images/26e3e793-98f5-4720-9f82-8963276d5e27.JPG
  }

  function handleImgLoadSuccess() {
    console.log('image loaded!')
  }

  function handleImgLoadError() {
    console.log('image not loaded')
  }

  return (
    <div>
      <div>
        <label htmlFor="img">Select an image:</label>
        <input
          type="file"
          id="img"
          name="img"
          accept="image/png, image/jpeg"
          onChange={(e) => handleImgUpload(e)}
        />
      </div>

      <img
        src={imgSrc}
        alt="Your upload"
        onLoad={handleImgLoadSuccess}
        onError={handleImgLoadError}
      />
    </div>
  )
}

但是，在控制台中，url 似乎是正确的。

<img src="/images/26e3e793-98f5-4720-9f82-8963276d5e27.JPG" height="100" width="200" alt="Input" class="jsx-855240488">

标签： javascripthtmlreactjs

解决方案

嘿——我明白你在做什么，但看起来这行不通。您需要创建一个新的文件阅读器。

const showTempImage = (e) => {
    const file = e.target.files[0];
    const img = document.createElement("img");

    const reader = new FileReader();

    reader.addEventListener('load', (e) => {
        img.src = e.target.result;
    });

    reader.readAsDataURL(file);

   // Append the img tag to the dom somewhere
}

推荐阅读