reactjs Ant设计上载显示文件大小和文件名

ttcibm8c  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(218)

如何在React.js的andd上传中显示文件大小和名称?like this是否可以在没有自定义代码和样式的情况下显示文件大小?
如果这是不可能的,所以我可以显示文件大小与自定义代码,但我需要显示文件大小与antd prop 或其他东西

import React from 'react';
import './index.css';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Upload } from 'antd';
import { useState } from 'react';

export default function UploadFile() {
    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'xxx.png',
            status: 'done',
            url: 'https://reactnative.dev/img/tiny_logo.png',
        },
    ]);

    const props = {
        action: 'https://reactnative.dev/img/tiny_logo.png',
        multiple: true,
    };
    // SAVE FILE IN LOCAL STORAGE
    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
        localStorage.setItem('image', JSON.stringify(fileList));
    }

    return (
        <Upload
            listType="picture"
            beforeUpload={(fileList) => {
                console.log('FILE', fileList.size);
                return true;
            }
            }
        >
            <Button icon={
                <UploadOutlined />}>Upload</Button >
        </Upload>
    );
}
fxnxkyjh

fxnxkyjh1#

我不认为AntD支持在上传列表中显示文件大小。
在您的示例中,可以使用onChange函数捕获文件大小,该函数不仅接收fileList,还接收包含文件大小(以字节为单位)的文件对象。您可以将文件大小保存到state,然后使用itemRender(示例)属性手动渲染。

相关问题