目录
一.常见属性的介绍
二.上传文件后如何点击文件就自动下载对应文件呢？
三.upload在表单中如何做到数据回显，即配置初始化文件列表数据？
四.如何修改文件列表的样式达到以下效果， 不同后缀名的文件显示对应的图标，超过3行显示滚动条，空间上显示3.5行？
一.常见属性的介绍
1.beforeUpload
文件上传之前的钩子，可以通过第一个形参file查看上传的文件信息（例如查看文件名、文件大小等进行校验），通常我们可以在这个函数中进行文件信息的校验，例如查看用户上传的文件名是否合法，文件大小是否超出限制等等，如果不想要上传这个文件可以返回“Upload.LIST_IGNORE”,返回false或者Promise.reject(file)，文件的上传状态status为error，返回Promise.resolve(file)则返回对应的文件信息
// 示例const beforeUpload = (file) => {console.log('beforeUpload:', file, file.name, file.name.indexOf(','));const isLt2M = file.size / 1024 / 1024 <= 2;if (!isLt2M) {// message.error('图片不能大于 2MB!');return Upload.LIST_IGNORE;}if (file.name.indexOf(',') !== -1) {// message.error('文件名不能含,');return Upload.LIST_IGNORE;}return Promise.resolve(file);};
2.defaultFileList
默认已经上传的文件列表，值得注意的是，当我们给Upload组件设置这个属性的时候，如果没有继续上传或删除文件，表单Form提交的时候Upload里面的数据是undefined
3.fileList
已经上传的文件列表，值得注意的是，表单提交的时候就是返回fileList内的数据
4.action
文件上传的路径，上传成功后文件信息会在fileList中显示
5.onChange
上传文件时的回调，通常可以在这里获取第二个形参fileList，用state保存结果
二.上传文件后如何点击文件就自动下载对应文件呢？
可以在Upload的onChange函数对第二个形参fileList进行map设置每一个文件的url
在Form表单中可以通过props.onChange来改变form表单中Upload组件这一项的返回值
const handleOnChange = (info) => {// 通过status判断文件已上传成功for (const file of info.fileList) {if (file.status !== 'done') return;}// 在Form表单中可以通过props.onChange来改变form表单中Upload组件这一项的返回值props.onChange &&props.onChange(info?.fileList?.map((item) => {return {...item,// 文件下载的路径可以和后端进行沟通 我们是/download/ + 文件id 为下载地址url: '/download/' + item?.response?.record?.fileId,fileId: item?.response?.record?.fileId,fileName: item?.response?.record?.fileName,};}),);};
三.upload在表单中如何做到数据回显，即配置初始化文件列表数据？
通过设置defaultFileList属性，其中uid要求唯一，status应该写done代表已经下载完成，name是文件名，url即点击文件时触发下载操作
const defaultFileList = [{uid: '1',name: 'xxx.png',status: 'done',url: '/xxx.png',},{uid: '2',name: 'xxxx.png',status: 'done',url: '/xxxx.png',},]
倘若要在Form表单中进行正确回显，需要注意的是我们应当监听传入defaultFileList的改变，将defaultFileList的值返回给表单Form
useEffect(() => {// 在Form表单中可以通过props.onChange来改变form表单中Upload组件这一项的返回值props.onChange && props.onChange(props.defaultFileList);}, [defaultFileList]);
四.如何修改文件列表的样式达到以下效果， 不同后缀名的文件显示对应的图标，超过3行显示滚动条，空间上显示3.5行？
需求1 不同后缀名的文件显示对应的图标
需求2 超过3行显示滚动条，空间上显示3.5行
解决1
文件列表中span元素中有title属性，我们可以根据这个title属性，利用属性选择器，设置伪元素
默认图标的样式通过display: none令其隐藏
.ant-upload-text-icon {display: none;}.ant-upload-list-item-name {position: relative;width: 216px;height: 32px;line-height: 32px;font-size: 12px;padding-left: 42px;&::after {position: absolute;content: '';background-size: auto;display: block;width: 20px;height: 20px;top: 6px;left: 10px;}&[title$='.xlsx'],&[title$='.xls'] {&::after {background-image: url(./img/img-excel.png);}}&[title$='.pdf'] {&::after {background-image: url(./img/img-pdf.png);}}}
解决2
max-height: 3.5行高度+ overflow:auto
.ant-upload-list.ant-upload-list-text {width: 100%;max-height: 114px;display: flex;flex-wrap: wrap;justify-content: flex-start;height: auto;overflow: auto;}.ant-upload-list-item.ant-upload-list-item-done.ant-upload-list-item-list-type-text {height: 32px;}
有问题欢迎在评论区提出讨论，谢谢！
