2 
import React, { Component } from "react";
import fire from "../config/fire";
import FileUploader from "react-firebase-file-uploader";
import { Document, Page } from "react-pdf";
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
class PdfUpload extends Component {
  state = {
    username: "",
    avatar: "",
    isUploading: false,
    progress: 0,
    avatarURL: "",
  };

  handleChangeUsername = (event) =>
    this.setState({ username: event.target.value });
  handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
  handleProgress = (progress) => this.setState({ progress });
  handleUploadError = (error) => {
    this.setState({ isUploading: false });
    console.error(error);
  };
  handleUploadSuccess = (filename) => {
    this.setState({ avatar: filename, progress: 100, isUploading: false });
    fire
      .storage()
      .ref("pdfs")
      .child(filename)
      .getDownloadURL()
      .then((url) => this.setState({ avatarURL: url }));
  };

  render() {
    let urlpdf = this.state.avatarURL;
    return (
      <div>
        <form>
          {this.state.isUploading && <p>Progress: {this.state.progress}</p>}
          {this.state.avatarURL && <Document file={urlpdf} />}
          <FileUploader
            name="avatar"
            randomizeFilename
            storageRef={fire.storage().ref("pdfs")}
            onUploadStart={this.handleUploadStart}
            onUploadError={this.handleUploadError}
            onUploadSuccess={this.handleUploadSuccess}
            onProgress={this.handleProgress}
          />
        </form>
      </div>
    );
  }
}

export default PdfUpload;

**在这里，在上面的代码中，我尝试使用 react-pdf 和 react-firebase-file-uploader 库上传和查看 PDF 文件。但是，PDF 文件正在正确上传，但是在网页中将上传的 pdf 显示为“UnknownErrorException 详细信息：“UnknownErrorException：无法获取”消息时出现错误：“无法获取”名称：“UnknownErrorException””**

4

0 回答 0