从零开始的野路子React/Node（9）Antd + multer实现文件上传
作者：互联网
最近心血来潮，打算自己捣腾个web app来练练手（虽然大概率会半路弃坑……），其中有一部分是关于文件上传的，在实现的过程中遇到了一些坑，于是打算把血泪教训都记录下来。
前端的部分采用了Antd，不得不说真是香，至少比我司内部的前端库香了1000倍……事半功倍。后端部分则主要通过multer来实现，目测应该是一种比较通用的做法？
1、捯饬前端
首先我们新建一个upload_file文件夹，在里面放我们的前端后端各种东西。
而后老规矩，通过create-react-app uf_ui来创建前端部分。npm install antd来安装一下antd。
然后我想要实现的功能是页面上一个按钮，点击按钮会弹出对话框（Modal），在其中上传文件，并可以加入一些其他的备注等等。那么我们先来准备一下对话框的部分。
我们在src目录下新建components，然后新建2个文件，ModalContainer.js作为对话框容器，而UploadFile.js负责对话框内部的内容：
ModalContainer.js的内容比较简单：
1 import React, { useState } from 'react';
2 import { Modal, Button } from 'antd';
3
4 export default function ModalContainer(props) {
5 const [visible, setVisible] = useState(false); //是否显示模态框
6
7 const showModal = () => {
8 setVisible(true); //显示
9 };
10
11 const handleCancel = () => {
12 setVisible(false); //隐藏
13 };
14
15 return (
16 <>
17 <Button
18 type={props.buttonType}
19 icon={props.icon}
20 onClick={showModal}>
21 {props.title}
22 </Button>
23
24 <Modal
25 title={props.title}
26 visible={visible}
27 footer={null}
28 onCancel={handleCancel}
29 {...props}
30 >
31 {React.cloneElement(props.content,
32 { handleCancel: handleCancel })}
33 </Modal>
34 </>
35 )
36 }
其中Button是页面载入后会显示的按钮，点击就会弹出对话框；而Modal则负责对话框本体，我们将footer设置成null来去掉默认的取消和确认按钮（也就是生成一个没有按钮的对话框）。此外，我们设置了ModalContainer将使用content参数来传入一个组件以显示内部的内容。
但是，由于我们去掉了取消和确认按钮，我们必须把关闭对话框的任务也交给content传入的组件来做（也就是说content的组件会包含取消和确认按钮），因此，我们必须把handleCancel这个函数传入content组件中，作为其props的一部分，React.cloneElement就实现了这一点，它将完整地复制content组件，并将handleCancel也注入它的props中。这样一来，我们在写content组件时，就能通过调用props.handleCancel来关闭对话框了。
接下来，我们把组件加入到App.js中：
1 import './App.css';
2 import { UploadOutlined } from '@ant-design/icons';
3 import ModalContainer from "./components/ModalContainer";
4 import UploadFile from "./components/UploadFile";
5
6 function App() {
7 return (
8 <div className="App">
9 <ModalContainer
10 icon={<UploadOutlined/>}
11 title="上传文件"
12 width={600}
13 content={<UploadFile/>}/>
14 </div>
15 );
16 }
17
18 export default App;
可以看到我们将UploadFile组件传入了content，作为对话框的内容。由于我们还没写任何东西，所以弹出后会是一片空白。此外，注意antd的图标库和antd本体在import时是分开的（虽然不用单独安装）。此外，想使用antd的样式的话，可以在App.css第一行前加入一句：@import 'antd/dist/antd.css';
npm start之后可以看到一个按钮，点击后一篇空白。
接下来我们来写一下UploadFile.js，对于UploadFile，我希望它是一个表单，有一个上传文件的按钮，有一个输入框来负责自定义文件名称，另一个用来写一些备注，我们先把这个表单整出来：
1 import {
2 Upload,
3 Form,
4 Button,
5 Input } from 'antd';
6 import { UploadOutlined } from '@ant-design/icons';
7
8 const layout = {
9 labelCol: { span: 6 },
10 wrapperCol: { span: 18 },
11 }; //表单的整体布局
12 const tailLayout = {
13 wrapperCol: { offset: 16, span: 8 },
14 }; //取消和确定按钮的布局
15
16 const { TextArea } = Input;
17
18 export default function UploadFile(props) {
19 const [form] = Form.useForm(); //用于之后取数据
20
21 return (
22 <>
23 <Form
24 {...layout}
25 form={form}
26 name="upload_file">
27
28 <Form.Item
29 label="文件名称"
30 name="name"
31 rules={[{ required: true,
32 message: "请输入文件名" }]}>
33 <Input/>
34 </Form.Item>
35
36 <Form.Item
37 label="备注"
38 name="desc"
39 rules={[{ required: false,
40 message: "请输入备注" }]}>
41 <TextArea rows={4}/>
42 </Form.Item>
43
44 <Form.Item
45 label="上传文件"
46 name="file"
47 rules={[{ required: true,
48 message: "请上传文件" }]}>
49 <Upload>
50 <Button icon={<UploadOutlined />}>开始上传</Button>
51 </Upload>
52 </Form.Item>
53
54 </Form>
55 </>
56 )
57 }
表单中一共3样东西，name对应文件名的输入，desc对应备注，file对应一个上传文件的按钮。此时我们再看页面，点击“上传文件”按钮，会看到表单弹出：
点击其中的开始上传，就可以选择文件了。随便上传一个试试，发现失败（红色）：
那是因为我们还没有配置上传的request。此外，我们发现对话框没有确认和取消按钮，只能靠大叉退出，我们可以先通过<Form.Item>加上：
1 import {
2 Upload,
3 Form,
4 Button,
5 Input,
6 Space } from 'antd';
7 import { UploadOutlined } from '@ant-design/icons';
8
9 const layout = {
10 labelCol: { span: 6 },
11 wrapperCol: { span: 18 },
12 }; //表单的整体布局
13 const tailLayout = {
14 wrapperCol: { offset: 16, span: 8 },
15 }; //取消和确定按钮的布局
16
17 const { TextArea } = Input;
18
19 export default function UploadFile(props) {
20 const [form] = Form.useForm(); //用于之后取数据
21
22 return (
23 <>
24 <Form
25 {...layout}
26 form={form}
27 name="upload_file">
28
29 <Form.Item
30 label="文件名称"
31 name="name"
32 rules={[{ required: true,
33 message: "请输入文件名" }]}>
34 <Input/>
35 </Form.Item>
36
37 <Form.Item
38 label="备注"
39 name="desc"
40 rules={[{ required: false,
41 message: "请输入备注" }]}>
42 <TextArea rows={4}/>
43 </Form.Item>
44
45 <Form.Item
46 label="上传文件"
47 name="file"
48 rules={[{ required: true,
49 message: "请上传文件" }]}>
50 <Upload>
51 <Button icon={<UploadOutlined />}>开始上传</Button>
52 </Upload>
53 </Form.Item>
54
55 <Form.Item
56 {...tailLayout}>
57 <Space>
58 <Button type="primary" htmlType="submit">
59 确认
60 </Button>
61 <Button onClick={props.handleCancel}>
62 取消
63 </Button>
64 </Space>
65 </Form.Item>
66 </Form>
67 </>
68 )
69 }
可以看到取消按钮的onClick会调用props.handleCancel，也就是我们刚才在ModalContainer中所做的注入。现在对话框里应该多了2个按钮，点击“取消”会关闭对话框，而点击确认则会提示表单还没填完（因为这两项我们设置了required: true）：
除此之外，我们还需要有个函数来负责点击“确认”按钮后的一系列步骤，我们自然希望点击确认后会提交表单，然后关闭窗口我们可以用axios来负责处理相关的request，但更重要的问题是，我们如何获得表单内填写的内容呢？antd的表单提供了getFieldValue和getFieldsValue这两个函数，但在实际使用过程中总是无法正确地取到值（感觉这俩更像是获取props而非states），不过我们可以通过自己写一个handleSubmit函数，并使之与表单的onFinish挂钩来完成取值过程。
…
export default function UploadFile(props) {
const [form] = Form.useForm(); //用于之后取数据
const handleSubmit = values => {
console.log(values)
props.handleCancel();
}
return (
<>
<Form
{...layout}
form={form}
name="upload_file"
onFinish={handleSubmit}>
…
</Form>
</>
)
}
当我们提交表单时，会触发onFinish，而它会调用handleSubmit来记录下表单的值，并且关闭对话框，我们来测试一下看看：
OK，我们成功地记录下了表单的值（虽然我们的文件并没有真正地传到后台）。
2、动态获取文件名
接下来我想做的一件事是，我每次只上传一个文件，当上传文件时，文件名称一栏会自动改成该文件的名称（不包括扩展名），这样一来我可以直接采用默认的文件名来提交表单了。
要实现这一点，我们首先得需要将上传的文件限制在1个，为此我们需要一个文件列表，并给Upload组件的onChange传入一个handleChange函数，在每次上传新文件时，新的文件会顶掉文件列表中的旧文件，再把文件列表传回给Upload组件的fileList，从而实现实时更新，并限制在1个文件：
import React, { useState } from 'react';
…
export default function UploadFile(props) {
const [form] = Form.useForm(); //用于之后取数据
const [fileList, setFileList] = useState(null); //文件列表
console.log(fileList)
…
const handleChange = (info) => {
let files = [...info.fileList];
files = files.slice(-1);
setFileList(files);
}
return (
<>
<Form
{...layout}
form={form}
name="upload_file"
onFinish={handleSubmit}>
…
<Form.Item
label="上传文件"
name="file"
rules={[{ required: true,
message: "请上传文件" }]}>
<Upload
onChange={handleChange}
fileList={fileList}>
<Button icon={<UploadOutlined />}>开始上传</Button>
</Upload>
</Form.Item>
…
</Form>
</>
)
}
我们可以看到每次文件上传后，新的会替换旧的，且列表内永远只有1个文件：
那接下来就是获取文件名了，同样，我们用一个变量负责记录文件名，同样在handleChange中完成提取文件名和变更该变量，最后我们用表单的setFieldsValue和useEffect来实时更新文件名称一栏：
import React, { useState, useEffect } from 'react';
…
export default function UploadFile(props) {
const [form] = Form.useForm(); //用于之后取数据
const [fileList, setFileList] = useState(null); //文件列表
const [fileName, setFileName] = useState(null); //文件名
console.log(fileName)
…
const handleChange = (info) => {
let files = [...info.fileList];
files = files.slice(-1);
setFileList(files);
if (files && files.length > 0) {
const [fname, fextname] = files[0]["name"].split(/\.(?=[^\.]+$)/); //分割文件名
setFileName(fname);
}
}
useEffect(() => {
//实时更新
form.setFieldsValue({
name: fileName,
});
}, [fileName]);
return (
<>
<Form
{...layout}
form={form}
name="upload_file"
onFinish={handleSubmit}>
…
</Form>
</>
)
}
我们可以看到，每次上传都会自动改变文件名称了：
至此，前端部分初步完成了。
3、捯饬后端
后端相对简单，新建一个uf_api文件夹作为后端部分，cd进入，npm init来进行初始化。另外我们再新建一个dest文件夹，作为存放我们上传的文件的地方。
我们可以按照上一篇中第2部分的方法（见https://www.cnblogs.com/silence-gtx/p/14092286.html）来搭建后端以及配置tsconfig.json，由于暂时不需要数据库，所以其他部分可以暂时忽略。
我们在src目录下新建controllers文件夹，并新建一个UploadController.ts来作为处理上传功能的controller：
接下来，我们会使用multer来负责处理上传的文件，并将其储存到硬盘上的指定位置，还有fs负责创建文件夹的操作。我们还需要tsoa来帮助我们更方便地写controller（全部npm install 一下）。
1 import {
2 Controller,
3 Request,
4 Post,
5 Route
6 } from 'tsoa';
7 import express from 'express';
8 const multer = require('multer');
9 const fs = require('fs');
10
11 const storagePath = "F:/node_project/upload_file/dest"; //设置储存路径
12
13 @Route("upload")
14 export class UploadController extends Controller {
15 @Post("/")
16 public async uploadFile(
17 @Request() request: express.Request
18 ): Promise<any> {
19 await this.handleUpload(request);
20 return true;
21 }
22
23 private async createFolder (folder: string) {
24 //创建文件夹，若文件夹已存在，则跳过
25 try {
26 fs.accessSync(folder);
27 console.log('目标文件夹已创建')
28 } catch (error) {
29 fs.mkdirSync(folder);
30 console.log('创建目标文件夹')
31 }
32 };
33
34 private async handleUpload (
35 request: express.Request
36 ): Promise<void> {
37 this.createFolder(storagePath);
38
39 var storage = multer.diskStorage({
40 destination: function (
41 req: express.Request,
42 file: any,
43 callback:any) {
44 callback(null, storagePath)
45 }, //负责处理路径
46 filename: function (
47 req: express.Request,
48 file: any,
49 callback:any
50 ) {
51 console.log(file)
52 callback(null, file.originalname)
53 } //负责处理文件名，originalname为你上传文件的名称
54 });
55
56 var upload = multer({ storage: storage });
57
58 const multerSingle = upload.single("file");
59 // 前端传过来的form-data应该将上传的文件放在file下，即form-data包含 {"file": 你的文件}
60 // antd的Upload组件会自动使用"file"
61
62 return new Promise((resolve, reject) => {
63 multerSingle(request, undefined, async (error: any) => {
64 if (error) {
65 reject(error);
66 }
67 resolve();
68 console.log("文件已上传")
69 });
70 });
71 }
72 }
UploadController包含3个函数，公有函数负责暴露接口并调用handleUpload来处理文件的上传，私有函数createFolder负责创建目标文件夹（如果已经有了就自动忽略），私有函数handleUpload负责具体的文件上传逻辑（注意，返回的类型必须是void，否则会报错）。
接下来，我们在uf_api根目录下创建tsoa的配置文件tsoa.json，并在src下新建routes，然后，和上一期一样，在cmd中执行yarn run tsoa routes生成路由：
1 {
2 "entryFile": "src/app.ts",
3 "noImplicitAdditionalProperties": "throw-on-extras",
4 "controllerPathGlobs": ["src/**/*Controller.ts"],
5 "spec": {
6 "outputDirectory": "src/routes",
7 "specVersion": 3
8 },
9 "routes": {
10 "routesDir": "src/routes"
11 }
12 }
同样地，在app.ts中加入路由（另外，别忘了cors，否则一会儿就没法跟前端连通了）：
1 import express from 'express';
2 import bodyParser from 'body-parser';
3 var cors = require('cors');
4 import { RegisterRoutes } from "./routes/routes";
5
6 // 创建一个express实例
7 const app: express.Application = express();
8
9 var corsOptions = {
10 credentials:true,
11 origin:'http://localhost:3000',
12 optionsSuccessStatus:200
13 };
14 app.use(cors(corsOptions));
15
16 app.use(
17 bodyParser.urlencoded({
18 extended: true,
19 })
20 );
21 app.use(bodyParser.json());
22
23 RegisterRoutes(app); // 添加路由
24
25 app.listen(5000, ()=> {
26 console.log('Example app listening on port 5000!');
27 });
接着把package.json中的start的值改为tsoa spec-and-routes && tsc && node ./build/app.js，然后我们npm start试试：
接下来，我们用Postman测试一下看看，输入Controller对应的地址，调成POST请求之后，在下方的Body中选择form-data，然后在KEY一栏就可以选择是Text还是File，测试上传文件的话我们就选File：
回忆一下刚才controller的注释中有提到我们的文件需要对应”file”，因此，我们在KEY这儿填上file，VALUE就上传一个文件，点击Send，成功的话应该会返回一个true：
我们可以看看console里的内容：
再到dest下看看：
文件已经成功上传，跑通了。接下来就可以试着贯通前后端了。
4、连通与改进
我们再回到前端的UploadFile.js，将后端的地址加入到Upload的action中去：
1 import React, { useState, useEffect } from 'react';
2 import {
3 Upload,
4 Form,
5 Button,
6 Input,
7 Space } from 'antd';
8 import { UploadOutlined } from '@ant-design/icons';
9
10 const layout = {
11 labelCol: { span: 6 },
12 wrapperCol: { span: 18 },
13 }; //表单的整体布局
14 const tailLayout = {
15 wrapperCol: { offset: 16, span: 8 },
16 }; //取消和确定按钮的布局
17
18 const { TextArea } = Input;
19
20 export default function UploadFile(props) {
21 const [form] = Form.useForm(); //用于之后取数据
22 const [fileList, setFileList] = useState(null); //文件列表
23 const [fileName, setFileName] = useState(null); //文件名
24 console.log(fileName)
25
26 const handleSubmit = values => {
27 console.log(values)
28 props.handleCancel();
29 }
30
31 const handleChange = (info) => {
32 let files = [...info.fileList];
33 files = files.slice(-1);
34 setFileList(files);
35
36 if (files && files.length > 0) {
37 const [fname, fextname] = files[0]["name"].split(/\.(?=[^\.]+$)/); //分割文件名
38 setFileName(fname);
39 }
40 }
41
42 useEffect(() => {
43 //实时更新
44 form.setFieldsValue({
45 name: fileName,
46 });
47 }, [fileName]);
48
49 return (
50 <>
51 <Form
52 {...layout}
53 form={form}
54 name="upload_file"
55 onFinish={handleSubmit}>
56
57 <Form.Item
58 label="文件名称"
59 name="name"
60 rules={[{ required: true,
61 message: "请输入文件名" }]}>
62 <Input/>
63 </Form.Item>
64
65 <Form.Item
66 label="备注"
67 name="desc"
68 rules={[{ required: false,
69 message: "请输入备注" }]}>
70 <TextArea rows={4}/>
71 </Form.Item>
72
73 <Form.Item
74 label="上传文件"
75 name="file"
76 rules={[{ required: true,
77 message: "请上传文件" }]}>
78 <Upload
79 action="http://localhost:5000/upload"
80 onChange={handleChange}
81 fileList={fileList}>
82 <Button icon={<UploadOutlined />}>开始上传</Button>
83 </Upload>
84 </Form.Item>
85
86 <Form.Item
87 {...tailLayout}>
88 <Space>
89 <Button type="primary" htmlType="submit">
90 确认
91 </Button>
92 <Button onClick={props.handleCancel}>
93 取消
94 </Button>
95 </Space>
96 </Form.Item>
97 </Form>
98 </>
99 )
100 }
我们试一试：
前后端的工作都毫无问题，成功！到此，我们已经初步完成了上传文件的功能。
但是转念一想，每次我们选择文件后，文件都会被直接上传到目标文件夹，并且直接覆盖同名文件。可是万一我只是手滑怎么办呢？为了避免这种现象，我想到的是单独再做一个上传按钮，每次选择文件后并不直接上传，需要点击按钮才能完成上传，即手动上传。此外，我还可以重命名我要上传的文件（比如用文件名称一栏的值代替原文件名再上传）。这样就可以一定程度上避免手滑的问题（当然，更保险一点应该做个文件已存在提示，不过本文没有做……）。
我们先来实现手动上传功能，我们要先去掉Upload的action以阻止默认上传行为的发生，然后自己用axios写一个来实现上传功能，此外再加个按钮以及一个handleUpload函数来触发上传功能（可以参考antd的手动上传案例）。
先从axios开始吧，新建一个UploadSvc.js：
1 import axios from 'axios';
2
3 const api = "http://localhost:5000"; //后段地址
4
5 class UploadSvc {
6 uploadDataset(file) {
7 let config = {
8 headers: {
9 "Content-Type": "multipart/form-data"
10 }
11 } // 我们上传的是form-data
12 return new Promise((resolve) => resolve(axios.post(`${api}/upload`, file, config)));
13 }
14 }
15
16 export default new UploadSvc();
uploadDataset将接受一个file，然后以form-data的形式发送后端的相应路径。
接下来我们将UploadSvc引入UploadFile.js中，并加上其他东西：
1 import React, { useState, useEffect } from 'react';
2 import {
3 Upload,
4 Form,
5 Button,
6 Input,
7 Space,
8 message } from 'antd';
9 import { UploadOutlined } from '@ant-design/icons';
10 import UploadSvc from "./UploadSvc";
11
12 const layout = {
13 labelCol: { span: 6 },
14 wrapperCol: { span: 18 },
15 }; //表单的整体布局
16 const tailLayout = {
17 wrapperCol: { offset: 16, span: 8 },
18 }; //取消和确定按钮的布局
19
20 const { TextArea } = Input;
21
22 export default function UploadFile(props) {
23 const [form] = Form.useForm(); //用于之后取数据
24 const [fileList, setFileList] = useState(null); //文件列表
25 const [fileName, setFileName] = useState(null); //文件名
26 const [uploadName, setUploadName] = useState(null); //文件全名（包含扩展名）
27 const [uploading, setUploading] = useState(false); //是否在上传中
28
29 console.log(uploadName)
30
31 const handleSubmit = values => {
32 //处理表单提交
33 console.log(values)
34 props.handleCancel();
35 }
36
37 const handleChange = (info) => {
38 //处理文件名一栏根据上传文件改变自动变化
39 let files = [...info.fileList];
40 files = files.slice(-1);
41 setFileList(files);
42
43 if (files && files.length > 0) {
44 const [fname, fextname] = files[0]["name"].split(/\.(?=[^\.]+$)/); //分割文件名
45 setFileName(fname);
46 setUploadName(files[0]["name"]); //设置全名
47 }
48 }
49
50 const handleUpload = () => {
51 //处理手动上传
52 const formData = new FormData();
53 if (fileList && fileName !== "") {
54 let file = fileList[0]
55 formData.append('file', file.originFileObj, uploadName); //一定要用file.originFileObj！！！
56 setUploading(true) //设置状态为上传中
57
58 UploadSvc.uploadDataset(formData)
59 .then(response => {
60 message.success(`文件 ${uploadName} 已上传`, 2) //成功的提示消息将持续2秒
61 setUploading(false) //重置上传状态
62 })
63 }
64 }
65
66 useEffect(() => {
67 //实时更新
68 form.setFieldsValue({
69 name: fileName,
70 });
71 }, [fileName]);
72
73 return (
74 <>
75 <Form
76 {...layout}
77 form={form}
78 name="upload_file"
79 onFinish={handleSubmit}>
80
81 <Form.Item
82 label="文件名称"
83 name="name"
84 rules={[{ required: true,
85 message: "请输入文件名" }]}>
86 <Input/>
87 </Form.Item>
88
89 <Form.Item
90 label="备注"
91 name="desc"
92 rules={[{ required: false,
93 message: "请输入备注" }]}>
94 <TextArea rows={4}/>
95 </Form.Item>
96
97 <Form.Item
98 label="上传文件"
99 name="file"
100 rules={[{ required: true,
101 message: "请上传文件" }]}>
102 <Upload
103 onChange={handleChange}
104 fileList={fileList}>
105 <Button icon={<UploadOutlined />}>开始上传</Button>
106 </Upload>
107 <Button
108 type="primary"
109 onClick={handleUpload}
110 disabled={fileList === null || fileList.length === 0}
111 loading={uploading}
112 style={{ marginTop: 16 }}
113 >
114 {uploading ? "上传中..." : "开始上传"}
115 </Button>
116 </Form.Item>
117
118 <Form.Item
119 {...tailLayout}>
120 <Space>
121 <Button type="primary" htmlType="submit">
122 确认
123 </Button>
124 <Button onClick={props.handleCancel}>
125 取消
126 </Button>
127 </Space>
128 </Form.Item>
129 </Form>
130 </>
131 )
132 }
这里千万要注意的是，我们使用formData.append给formData添加要上传的文件时，一定要使用file.originFileObj而不是file本身（卡了我几个小时的一个点）！因为antd默认去除的这个file并不是文件本体，而是包含了一些metadata的一个Object，其中的originFileObj才是真正的文件本体。
现在我们来试试，选择文件，不点击“开始上传”按钮：
可以看到Upload默认的上传已经由于缺少action而失败，此时后端的console是没有任何反应的，说明上传没有发生。然后我们点击“开始上传”：
可以看到这次弹出了上传成功的消息，查看一下后端：
上传确实成功了。
然后，我们还发现，即使我们修改了文件名称一栏，上传后的文件名依然没有改变，为了实现这一点，我们需要Form.Provider：
import React, { useState, useEffect } from 'react';
import {
Upload,
Form,
Button,
Input,
Space,
message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import UploadSvc from "./UploadSvc";
…
export default function UploadFile(props) {
const [form] = Form.useForm(); //用于之后取数据
const [fileList, setFileList] = useState(null); //文件列表
const [fileName, setFileName] = useState(null); //文件名
const [extName, setExtName] = useState(null); //扩展名
const [uploadName, setUploadName] = useState(null); //文件全名（包含扩展名）
const [uploading, setUploading] = useState(false); //是否在上传中
console.log(uploadName)
…
const handleChange = (info) => {
//处理文件名一栏根据上传文件改变自动变化
let files = [...info.fileList];
files = files.slice(-1);
setFileList(files);
if (files && files.length > 0) {
const [fname, fextname] = files[0]["name"].split(/\.(?=[^\.]+$)/); //分割文件名
setFileName(fname); //设置文件名
setExtName(fextname); //设置扩展名
setUploadName(files[0]["name"]); //设置全名
}
}
…
return (
<>
<Form.Provider
onFormChange={
() => uploadName && setUploadName(form.getFieldValue('name') + '.' + extName)
}>
<Form
{...layout}
form={form}
name="upload_file"
onFinish={handleSubmit}>
…
</Form>
</Form.Provider>
</>
)
}
我们通过它的onFormChange，来实现每次表单内容更新时，更新uploadName这个变量。现在我们可以试试我们的功能有没有成功：
看一下dest，发现成功上传了新的文件：
最后，加上一点细节：
1 import React, { useState, useEffect } from 'react';
2 import {
3 Upload,
4 Form,
5 Button,
6 Input,
7 Space,
8 message } from 'antd';
9 import { UploadOutlined } from '@ant-design/icons';
10 import UploadSvc from "./UploadSvc";
11
12 const layout = {
13 labelCol: { span: 6 },
14 wrapperCol: { span: 18 },
15 }; //表单的整体布局
16 const tailLayout = {
17 wrapperCol: { offset: 16, span: 8 },
18 }; //取消和确定按钮的布局
19
20 const { TextArea } = Input;
21
22 export default function UploadFile(props) {
23 const [form] = Form.useForm(); //用于之后取数据
24 const [fileList, setFileList] = useState(null); //文件列表
25 const [fileName, setFileName] = useState(null); //文件名
26 const [extName, setExtName] = useState(null); //扩展名
27 const [uploadName, setUploadName] = useState(null); //文件全名（包含扩展名）
28 const [uploading, setUploading] = useState(false); //是否在上传中
29
30 console.log(uploadName)
31
32 const handleSubmit = values => {
33 //处理表单提交
34 console.log(values)
35 props.handleCancel();
36 }
37
38 const handleChange = (info) => {
39 //处理文件名一栏根据上传文件改变自动变化
40 let files = [...info.fileList];
41 files = files.slice(-1);
42 setFileList(files);
43
44 if (files && files.length > 0) {
45 const [fname, fextname] = files[0]["name"].split(/\.(?=[^\.]+$)/); //分割文件名
46 setFileName(fname); //设置文件名
47 setExtName(fextname); //设置扩展名
48 setUploadName(files[0]["name"]); //设置全名
49 }
50 }
51
52 const handleUpload = () => {
53 //处理手动上传
54 const formData = new FormData();
55 if (fileList && fileName !== "") {
56 let file = fileList[0]
57 formData.append('file', file.originFileObj, uploadName); //一定要用file.originFileObj！！！
58 setUploading(true) //设置状态为上传中
59
60 UploadSvc.uploadDataset(formData)
61 .then(response => {
62 message.success(`文件 ${uploadName} 已上传`, 2) //成功的提示消息将持续2秒
63 setUploading(false) //重置上传状态
64 form.setFieldsValue({
65 file: true //满足data的required: true
66 })
67 })
68 }
69 }
70
71 useEffect(() => {
72 //实时更新
73 form.setFieldsValue({
74 name: fileName,
75 });
76 }, [fileName]);
77
78 return (
79 <>
80 <Form.Provider
81 onFormChange={
82 () => uploadName && setUploadName(form.getFieldValue('name') + '.' + extName)
83 }>
84 <Form
85 {...layout}
86 form={form}
87 name="upload_file"
88 onFinish={handleSubmit}>
89
90 <Form.Item
91 label="文件名称"
92 name="name"
93 rules={[{ required: true,
94 message: "请输入文件名" }]}>
95 <Input/>
96 </Form.Item>
97
98 <Form.Item
99 label="备注"
100 name="desc"
101 rules={[{ required: false,
102 message: "请输入备注" }]}>
103 <TextArea rows={4}/>
104 </Form.Item>
105
106 <Form.Item
107 label="上传文件"
108 name="file"
109 rules={[{ required: true,
110 message: "请上传文件" }]}>
111 <Upload
112 onChange={handleChange}
113 beforeUpload={file => {
114 fileList && setFileList([...fileList, file])
115 return false;
116 }}
117 fileList={fileList}>
118 <Button icon={<UploadOutlined />}>开始上传</Button>
119 </Upload>
120 <Button
121 type="primary"
122 onClick={handleUpload}
123 disabled={fileList === null || fileList.length === 0}
124 loading={uploading}
125 style={{ marginTop: 16 }}
126 >
127 {uploading ? "上传中..." : "开始上传"}
128 </Button>
129 </Form.Item>
130
131 <Form.Item
132 {...tailLayout}>
133 <Space>
134 <Button type="primary" htmlType="submit">
135 确认
136 </Button>
137 <Button onClick={props.handleCancel}>
138 取消
139 </Button>
140 </Space>
141 </Form.Item>
142 </Form>
143 </Form.Provider>
144 </>
145 )
146 }
通过给Upload添加beforeUpload来避免触发默认上传行为（Not Found报错，文件名发红）。
此外，由于上传文件（file部分）的required是true，也就是说是表单中必须要填写的内容，如果我们上传完就此提交，会报错，导致无法提交表单：
我们需要在handleUpload中给Form的file部分设置一个值来满足required的要求。这样一来，我们就可以顺利提交了：
一套比较完整的文件上传就做好了。
代码见：
https://github.com/SilenceGTX/upload_file
标签：Node,files,const,文件,React,multer,file,import,上传 来源： https://www.cnblogs.com/silence-gtx/p/14251145.html