Question

我正在React JS中进行pdf上传。我想上传pdf文件，只想在带有小div的上载按钮的顶部显示，同时显示“删除”按钮，如果我单击“删除”，则应该将其删除。

我同样成功地完成了图像处理。我可以上传图像，也可以预览。但是在进行pdf上传时我需要一些帮助

这是我的代码

 this.state = {
      file: '',
      imagePreviewUrl: ''
    }

getPhoto（e）{ e.preventDefault（）;

let reader = new FileReader();
let file = e.target.files[0];

reader.onloadend = () => {
  this.setState({
    file: file,
    imagePreviewUrl: reader.result
  });
}
  reader.readAsDataURL(file);
}

 render() {
  const { imagePreviewUrl, file } = this.state;
  let imagePreview = null;
     if (imagePreviewUrl) {
        imagePreview = (<img src={imagePreviewUrl} />);
      } else {
        imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
      }
return (
      <React.Fragment>
      <div className={styles.previewBlock}>
        {imagePreview}
        <div className={styles.fileName}>{file.name}<span>
        <i className="fa fa-times" /></span></div>
      </div>
  )
 }

Answer 1

没有可以为您呈现pdf的HTML元素，但是一种可能的解决方案是使用Mozilla的pdf.js library，它可以将pdf页面呈现到canvas元素上。

Answer 2

您可以尝试使用react-pdf。我没有使用过它，但是在大纲演示中它呈现了一个pdf文件。希望对您有帮助！

如何仅上传PDF文件并在React Js中预览

2 个答案: