(问题集八-上传教学视频项目)2021-11-23

table相关经验

1.rowKey
表格行 key 的取值，可以是字符串或一个函数 (这个指定每一行的主键)
2.columns
(1)dataIndex 唯一标识 用来对应数据中的数据项,有dataindex后就可以不用key 支持数组??(这种用法可以试试)
(2)className:列样式类名
(3)render:参数(text, record, index) 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引,也可以直接用一个data参数(data) data表示当前行的数据对象

image.png

用来自己渲染对应的表格

form相关经验

formItem中如果有多个组件需要给每一个组件设置单独的key

upload相关经验

1.beforeUpload:用来检验文件的格式,大小等问题,并需要存储该函数的参数file 因为这个file参数是File类型的 发送请求时需要传递这个类型的文件
function beforeUpload(file, name) {
//判断类型与大小
let isJpgOrPng;
let largeLimit;
if (name == 'cover') {
setIsCoverTip(false);
isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
largeLimit = file.size / 1024 < 200;
} else {
setIsVideoTip(false)
isJpgOrPng = file.type === 'video/*' || file.type === 'video/quicktime';
largeLimit = file.size / 1024 / 1024 < 200;
}

    if (!isJpgOrPng) {
        message.error('图片只能传jpeg与png文件,视频只能传mov文件');
    }
    if (!largeLimit) {
        message.error('图片必须小于200k,视频必须小于200mb');
    }

//将file文件传入表单项 使用setFields函数
if (isJpgOrPng && largeLimit) {
Myform.setFields([{
name: name,
value: file
}])
}
return isJpgOrPng && largeLimit;
}
2.onChange:一般用来确定文件上传进度
const handleChange = (info, name) => {
if (info.file.status === 'uploading') {
if (name == 'cover') {
setCoverLoading(true)
} else {
setvideoloading(true)
}
return;
}
if (info.file.status === 'done') {
if (name == 'cover') {
setCoverLoading(false)
} else {
setvideoloading(false)
}
return;
}
};
所以为什么不在onChange中文件传输完成后设置file呢?因为该info.file不是File类型的 所有不能用来传输 ,而且在beforeUpload中进行大小类型判断完的file文件已经具备了发送请求的要求
3.maxCount 设置最多上传文件的个数
4.文件需要放入formData中进行发送请求