上传文件（图片/PDF）并使用 React 预览上传的图片/PDF

【问题标题】：Uploading file (Images/PDF) and also preview uploaded images/PDFusing React上传文件（图片/PDF）并使用 React 预览上传的图片/PDF
【发布时间】：2021-04-06 23:55:11
【问题描述】：

我正在使用指定的链接 Uploading File using React 对于上传文件但它只接受图像，我也必须上传 PDF，还想预览上传的文件。

请帮助我上传图片、PDF 格式并预览上传的文件。请让我知道是否有任何基于我的要求的库。

我是 React 新手。请帮助我提前致谢。

【问题讨论】：

分享您的组件或您的输入。
我分享了一个链接，我使用的是相同的。请检查。
是的，通过使用相同的代码如何上传PDF？

标签： reactjs image pdf file-upload

【解决方案1】：

如果您传递 accept="image/png, image/jpeg" 它会限制为图像还有更多可用的选项here

const App = () => {
  
  const handleImageChange = (e) => {
    let reader = new FileReader();
    const files = e.target.files;

    if (files.length) {
      const file = files[0];
      console.log(file)
    }
  };
  return(
      <input
      type="file"
      onChange={handleImageChange}
      // accept="image/png, image/jpeg"
    />
   )
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：

如何添加 PDF，我可以看到（预览）使用上述代码上传的文件吗？
你应该使用FileReader();来读取文件。