javascript - Ant Design Upload 获取文件内容

Question

我正在使用 Ant Design Upload 组件。有没有办法可以将所选文件的内容作为 JavaScript 中的字符串获取，以便在页面上显示？

理想情况下，我想访问file.data什么的。

<Upload
    accept=".txt, .csv"
    showUploadList={false}
    beforeUpload={(file, fileList) => {
        // Access file content here and do something with it
        console.log(file);

        // Prevent upload
        return false;
    }}
>
    <Button>
        <Icon type="upload" /> Click to Upload
    </Button>
</Upload>

标签： javascriptreactjsfileantd

Answer 1

受到Shreyans Shrivastav的回答的极大启发，但经过修改以更好地适应所要求的内容。您可以使用 a来读取文件的内容：FileReader

<Upload
    accept=".txt, .csv"
    showUploadList={false}
    beforeUpload={file => {
        const reader = new FileReader();

        reader.onload = e => {
            console.log(e.target.result);
        };
        reader.readAsText(file);

        // Prevent upload
        return false;
    }}
>
    <Button>
        <Icon type="upload" /> Click to Upload
    </Button>
</Upload>;