如何在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>
);
}
1条答案
按热度按时间fxnxkyjh1#
我不认为AntD支持在上传列表中显示文件大小。
在您的示例中,可以使用onChange函数捕获文件大小,该函数不仅接收
fileList
,还接收包含文件大小(以字节为单位)的文件对象。您可以将文件大小保存到state,然后使用itemRender(示例)属性手动渲染。