在 antd 上传器中预览文件

我有这个来自 ant design 的上传器:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import {Upload, Icon, Modal} from "antd";

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
    });
}

class PicturesWall extends React.Component {
    state = {
        previewVisible: false,
        previewImage: "",
        fileList: [
            {
                uid: "-1",
                name: "image.png",
                status: "done",
                url:
                    "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            },
            {
                uid: "-2",
                name: "image.png",
                status: "done",
                url:
                    "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            },
            {
                uid: "-3",
                name: "image.png",
                status: "done",
                url:
                    "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            },
            {
                uid: "-4",
                name: "image.png",
                status: "done",
                url:
                    "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            },
            {
                uid: "-5",
                name: "image.png",
                status: "error"
            }
        ]
    };

    handleCancel = () => this.setState({previewVisible: false});

    handlePreview = async (file) => {
        console.log(file, "prev");
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }

        this.setState({
            previewImage: file.url || file.preview,
            previewVisible: true
        });
    };

    handleChange = ({fileList}) => this.setState({fileList});

    render() {
        const {previewVisible, previewImage, fileList} = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus"/>
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <div className="clearfix">
                <Upload
                    accept="application/pdf"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                >
                    {fileList.length >= 8 ? null : uploadButton}
                </Upload>
                <Modal
                    visible={previewVisible}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <img alt="example" style={{width: "100%"}} src={previewImage}/>
                </Modal>
            </div>
        );
    }
}

ReactDOM.render(<PicturesWall/>, document.getElementById("container"));

问题是我无法预览 pdf 文件。如果我上传 pdf 格式,为什么我无法预览文件?预览模式仅对图像打开,但对于文件,图标被禁用。谁能帮忙?
https://codesandbox.io/s/intelligent-mayer-e26cp?file=/index.js:0-2718

stack overflow Preview file in antd uploader
原文答案

答案:

作者头像

目前我发现 ant design 没有提供预览 pdf 或任何文档的设计组件,我们有同样的问题,但我建议你尝试 react-doc-viewer 并打开这个演示 https://codesandbox.io/s/zvk4j?file=/src/App.js:70-86

npm 我react文档查看器