目录
三.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: 'http://www.baidu.com/xxx.png',
},
{
uid: '2',
name: 'xxxx.png',
status: 'done',
url: 'http://www.baidu.com/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;
}
有问题欢迎在评论区提出讨论,谢谢!