文件的上传
const [fileData, setFileData] = useState({}); /* 文件数据 */
<Upload
// 文件列表
fileList={FILELIST}
//文件上传地址
action={`${rootUrl}/fyDataManage/IndexManagement/getFileIO`}
name='file'
//允许上传的文件类型
accept={`application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`}
// 这里是文件上传前的钩子函数,用于文件上传前做判断使用(文件大小,文件类型等)
/* beforeUpload={(file: any, fileList: any) => {
// console.log(file, '上传前');
let typeFile = file.type
if (typeFile == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || typeFile == 'application/vnd.ms-excel') {
} else {
message.error("请上传excel文件!")
return false;
}
}} */
// 默认上传列表(这里是只能上传一个,我就动态获取一下,正常情况下可以不写,默认显示,或者defaultFileList={[...fileList]})
defaultFileList={[FILELIST]}
// 上传文件改变时的状态
onChange={(info) => {
console.log(info);
// 判断一下长度,并只要最后一次上传的数据
if (info.fileList.length > 1) {
info.fileList = info.fileList.slice(-1);
message.warning("只能上传一个文件!");
}
// 如果是excel文件显示上传列表
/* let typeFile = info.file.type
if (typeFile == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || typeFile == 'application/vnd.ms-excel') {
setFILELIST(info.fileList)
} */
setFILELIST(info.fileList)
// 文件不是正在上传(上传error)
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
let res = info.file.response;
if (res.success === 0) {
message.warning(`${res.message}`);
}
}
// 文件已经上传
if (info.file.status === 'done') {
// console.log(info,'done');
let res = info.file.response;
// console.log(res.data)
if (res.success === 1) {
// 获取文件流
setFileData(res.data)
}
message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
}}
>
<Button icon={<UploadOutlined />}>上传</Button>
</Upload>
文件的下载,导出,批量导出
这里调用的是后端直接写好的接口,如果想用纯前端导出文件,需要自己写代码,参考链接:react 前端导出excel表格
const exportAllReport = () => {
console.log("批量导出", "选中的id,数组形式", SELECTROWKEYS);
if (SELECTROWKEYS.length == 0) {
message.warning('请选择导出选项')
} else {
//如果使用window.open下载的话,可能会出现闪屏的问题,不出现可以用,为了使用户体验更佳,可使用下面 iframe 解决或者用window.location.href
// window.open(`${rootUrl}/Portrait/nhDecisionReport/batchExportDecisionReportExcel?idList=${SELECTROWKEYS}&rbacToken=${rbacToken}`);
//推荐使用这种,比较简单
window.location.href =`${rootUrl}/Portrait/nhDecisionReport/batchExportDecisionReportExcel?idList=${SELECTROWKEYS}&rbacToken=${rbacToken}`
//createElement一个隐藏的iframe,src指向下载链接,延时清空节点
const iframe = document.createElement('iframe');
iframe.src = `${rootUrl}/Portrait/nhDecisionReport/batchExportDecisionReportExcel?idList=${SELECTROWKEYS}&rbacToken=${rbacToken}`;
iframe.style.display = 'none';
document.body.appendChild(iframe);
setTimeout(() => {
document.body.removeChild(iframe);
}, 1000);
}
文件上传是还要传递额外的参数
这里面的data最好写成对象形式,网上有说写成函数的、布尔值的,我没试过,有兴趣的可以试试,
const [targetId, setTargetId] = useState({}); /* 指标id */
//在指定的方法中将需要传递的参数存成对象形式
useEffect(()=>{
setTargetId({id:'123'})
},[])
<Upload
action={url}
accept={`application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`}
name='file'
//重点在这里,传递的参数
data={targetId}
{/*
千万不要这样写
data={
id:'123'
}
*/}
onChange={(info) => {
这里做判断
}
>
<Button icon={<UploadOutlined />}>上传</Button>
</Upload>