react中，antd组件中的upload实现，文件的上传，文件的下载，导出，批量导出（直接调接口），上传额外的参数（data）_antd upload带参数文件上传

文件的上传

  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

文件的下载，导出，批量导出

这里调用的是后端直接写好的接口，如果想用纯前端导出文件，需要自己写代码，参考链接：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);


    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

文件上传是还要传递额外的参数

这里面的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28