表单中使用antd组件库的上传组件的文件(图片)上传、预览、删除。删除由组件自带,本篇主要讲解上传和预览功能。
1、这里使用了react的useState,定义了初始化变量
const [fileList, setFileLists] = useState([]);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState(false);
2、表单中使用上传组件的参数getValueFromEvent所传的事件
// 上传文件前的文件大小判断
const normFile = (e) => {
let size = 0;
if (Array.isArray(e)) {
size = e[0].size;
} else if (e.fileList.length > 0) {
size = e.fileList[0].size;
}
const isLt5M = size / 1024 / 1024 <= 5;
if (!isLt5M) {
setFileLists([]);
Modal.error({
title: '文件大小不能超过5M',
});
return [];
}
if (Array.isArray(e)) {
return e;
}
setFileLists(e.fileList);
return e && e.fileList;
};
3、显示和关闭预览图片弹出框
// 图片预览
const handlePrevi