从零开始的野路子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的内容比较简单：

import React, { useState } from 'react';
import { Modal, Button } from 'antd';

export default function ModalContainer(props) {
    const [visible, setVisible] = useState(false); //是否显示模态框
    
    const showModal = () => {
        setVisible(true); //显示
    };

    const handleCancel = () => {
        setVisible(false); //隐藏
    };

    return (
        <>
            <Button
            type={props.buttonType} 
            icon={props.icon} 
            onClick={showModal}>
                {props.title}
            </Button>

            <Modal
            title={props.title}
            visible={visible}
            footer={null}
            onCancel={handleCancel}
            {...props}
            >
                {React.cloneElement(props.content, 
                    { handleCancel: handleCancel })}
            </Modal>
        </>
    )
}

其中Button是页面载入后会显示的按钮，点击就会弹出对话框；而Modal则负责对话框本体，我们将footer设置成null来去掉默认的取消和确认按钮（也就是生成一个没有按钮的对话框）。此外，我们设置了ModalContainer将使用content参数来传入一个组件以显示内部的内容。

但是，由于我们去掉了取消和确认按钮，我们必须把关闭对话框的任务也交给content传入的组件来做（也就是说content的组件会包含取消和确认按钮），因此，我们必须把handleCancel这个函数传入content组件中，作为其props的一部分，React.cloneElement就实现了这一点，它将完整地复制content组件，并将handleCancel也注入它的props中。这样一来，我们在写content组件时，就能通过调用props.handleCancel来关闭对话框了。

接下来，我们把组件加入到App.js中：

import './App.css';
import { UploadOutlined } from '@ant-design/icons';
import ModalContainer from "./components/ModalContainer";
import UploadFile from "./components/UploadFile";

function App() {
  return (
    <div className="App">
      <ModalContainer 
      icon={<UploadOutlined/>} 
      title="上传文件" 
      width={600}
      content={<UploadFile/>}/>
    </div>
  );
}

export default App;

可以看到我们将UploadFile组件传入了content，作为对话框的内容。由于我们还没写任何东西，所以弹出后会是一片空白。此外，注意antd的图标库和antd本体在import时是分开的（虽然不用单独安装）。此外，想使用antd的样式的话，可以在App.css第一行前加入一句：@import 'antd/dist/antd.css';

npm start之后可以看到一个按钮，点击后一篇空白。

 

接下来我们来写一下UploadFile.js，对于UploadFile，我希望它是一个表单，有一个上传文件的按钮，有一个输入框来负责自定义文件名称，另一个用来写一些备注，我们先把这个表单整出来：

import { 
    Upload, 
    Form, 
    Button, 
    Input } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
}; //表单的整体布局
const tailLayout = {
    wrapperCol: { offset: 16, span: 8 },
}; //取消和确定按钮的布局

const { TextArea } = Input;

export default function UploadFile(props) {
    const [form] = Form.useForm(); //用于之后取数据

    return (
        <>
            <Form 
            {...layout}
            form={form}
            name="upload_file">

                <Form.Item
                label="文件名称"
                name="name"
                rules={[{ required: true,
                    message: "请输入文件名" }]}>
                    <Input/>
                </Form.Item>

                <Form.Item
                label="备注"
                name="desc"
                rules={[{ required: false,
                    message: "请输入备注" }]}>
                    <TextArea rows={4}/>
                </Form.Item>

                <Form.Item
                label="上传文件"
                name="file"
                rules={[{ required: true,
                    message: "请上传文件" }]}>
                    <Upload>
                        <Button icon={<UploadOutlined />}>开始上传</Button>
                    </Upload>
                </Form.Item>

            </Form>
        </>
    )
}

表单中一共3样东西，name对应文件名的输入，desc对应备注，file对应一个上传文件的按钮。此时我们再看页面，点击“上传文件”按钮，会看到表单弹出：

 

点击其中的开始上传，就可以选择文件了。随便上传一个试试，发现失败（红色）：

 

那是因为我们还没有配置上传的request。此外，我们发现对话框没有确认和取消按钮，只能靠大叉退出，我们可以先通过<Form.Item>加上：

import { 
    Upload, 
    Form, 
    Button, 
    Input, 
    Space } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
}; //表单的整体布局
const tailLayout = {
    wrapperCol: { offset: 16, span: 8 },
}; //取消和确定按钮的布局

const { TextArea } = Input;

export default function UploadFile(props) {
    const [form] = Form.useForm(); //用于之后取数据

    return (
        <>
            <Form 
            {...layout}
            form={form}
            name="upload_file">

                <Form.Item
                label="文件名称"
                name="name"
                rules={[{ required: true,
                    message: "请输入文件名" }]}>
                    <Input/>
                </Form.Item>

                <Form.Item
                label="备注"
                name="desc"
                rules={[{ required: false,
                    message: "请输入备注" }]}>
                    <TextArea rows={4}/>
                </Form.Item>

                <Form.Item
                label="上传文件"
                name="file"
                rules={[{ required: true,
                    message: "请上传文件" }]}>
                    <Upload>
                        <Button icon={<UploadOutlined />}>开始上传</Button>
                    </Upload>
                </Form.Item>

                <Form.Item 
                {...tailLayout}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            确认
                        </Button>
                        <Button onClick={props.handleCancel}>
                            取消
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </>
    )
}

可以看到取消按钮的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 一下）。

import { 
    Controller, 
    Request,
    Post,
    Route
} from 'tsoa';
import express from 'express';
const multer = require('multer');
const fs = require('fs');

const storagePath = "F:/node_project/upload_file/dest"; //设置储存路径

@Route("upload")
export class UploadController extends Controller {
    @Post("/")
    public async uploadFile(
        @Request() request: express.Request
    ): Promise<any> {
        await this.handleUpload(request);
        return true;
    }

    private async createFolder (folder: string) {
        //创建文件夹，若文件夹已存在，则跳过
        try {
            fs.accessSync(folder);
            console.log('目标文件夹已创建')
        } catch (error) {
            fs.mkdirSync(folder);
            console.log('创建目标文件夹')
        }
    };

    private async handleUpload (
        request: express.Request
    ): Promise<void> {
        this.createFolder(storagePath);

        var storage = multer.diskStorage({
            destination: function (
                req: express.Request, 
                file: any, 
                callback:any) {
                    callback(null, storagePath)
                }, //负责处理路径
            filename: function (
                req: express.Request, 
                file: any, 
                callback:any
            ) {
                console.log(file)
                callback(null, file.originalname)
            } //负责处理文件名，originalname为你上传文件的名称
        });

        var upload = multer({ storage: storage });

        const multerSingle = upload.single("file");
        // 前端传过来的form-data应该将上传的文件放在file下，即form-data包含 {"file": 你的文件}
        // antd的Upload组件会自动使用"file"

        return new Promise((resolve, reject) => {
            multerSingle(request, undefined, async (error: any) => {
                if (error) {
                    reject(error);
                }
                resolve();
                console.log("文件已上传")
            });
        });
    }
}

UploadController包含3个函数，公有函数负责暴露接口并调用handleUpload来处理文件的上传，私有函数createFolder负责创建目标文件夹（如果已经有了就自动忽略），私有函数handleUpload负责具体的文件上传逻辑（注意，返回的类型必须是void，否则会报错）。

接下来，我们在uf_api根目录下创建tsoa的配置文件tsoa.json，并在src下新建routes，然后，和上一期一样，在cmd中执行yarn run tsoa routes生成路由：

{
    "entryFile": "src/app.ts",
    "noImplicitAdditionalProperties": "throw-on-extras",
    "controllerPathGlobs": ["src/**/*Controller.ts"],
    "spec": {
      "outputDirectory": "src/routes",
      "specVersion": 3
    },
    "routes": {
      "routesDir": "src/routes"
    }
}

同样地，在app.ts中加入路由（另外，别忘了cors，否则一会儿就没法跟前端连通了）：

import express from 'express';
import bodyParser from 'body-parser';
var cors = require('cors');
import { RegisterRoutes } from "./routes/routes";

// 创建一个express实例
const app: express.Application = express();

var corsOptions = {
    credentials:true,
    origin:'http://localhost:3000',
    optionsSuccessStatus:200
};
app.use(cors(corsOptions));

app.use(
    bodyParser.urlencoded({
      extended: true,
    })
);
app.use(bodyParser.json());

RegisterRoutes(app); // 添加路由

app.listen(5000, ()=> {
    console.log('Example app listening on port 5000!');
});

接着把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中去：

import React, { useState, useEffect } from 'react';
import { 
    Upload, 
    Form, 
    Button, 
    Input, 
    Space } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
}; //表单的整体布局
const tailLayout = {
    wrapperCol: { offset: 16, span: 8 },
}; //取消和确定按钮的布局

const { TextArea } = Input;

export default function UploadFile(props) {
    const [form] = Form.useForm(); //用于之后取数据
    const [fileList, setFileList] = useState(null); //文件列表
    const [fileName, setFileName] = useState(null); //文件名
    console.log(fileName)

    const handleSubmit = values => {
        console.log(values)
        props.handleCancel();
    }

    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.Item
                label="文件名称"
                name="name"
                rules={[{ required: true,
                    message: "请输入文件名" }]}>
                    <Input/>
                </Form.Item>

                <Form.Item
                label="备注"
                name="desc"
                rules={[{ required: false,
                    message: "请输入备注" }]}>
                    <TextArea rows={4}/>
                </Form.Item>

                <Form.Item
                label="上传文件"
                name="file"
                rules={[{ required: true,
                    message: "请上传文件" }]}>
                    <Upload
                    action="http://localhost:5000/upload"
                    onChange={handleChange}
                    fileList={fileList}>
                        <Button icon={<UploadOutlined />}>开始上传</Button>
                    </Upload>
                </Form.Item>

                <Form.Item 
                {...tailLayout}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            确认
                        </Button>
                        <Button onClick={props.handleCancel}>
                            取消
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </>
    )
}

我们试一试：

 

 

前后端的工作都毫无问题，成功！到此，我们已经初步完成了上传文件的功能。

但是转念一想，每次我们选择文件后，文件都会被直接上传到目标文件夹，并且直接覆盖同名文件。可是万一我只是手滑怎么办呢？为了避免这种现象，我想到的是单独再做一个上传按钮，每次选择文件后并不直接上传，需要点击按钮才能完成上传，即手动上传。此外，我还可以重命名我要上传的文件（比如用文件名称一栏的值代替原文件名再上传）。这样就可以一定程度上避免手滑的问题（当然，更保险一点应该做个文件已存在提示，不过本文没有做……）。

我们先来实现手动上传功能，我们要先去掉Upload的action以阻止默认上传行为的发生，然后自己用axios写一个来实现上传功能，此外再加个按钮以及一个handleUpload函数来触发上传功能（可以参考antd的手动上传案例）。

先从axios开始吧，新建一个UploadSvc.js：

import axios from 'axios';

const api = "http://localhost:5000"; //后段地址

class UploadSvc {
    uploadDataset(file) {
        let config = {
            headers: {
                "Content-Type": "multipart/form-data"
            }
        } // 我们上传的是form-data
        return new Promise((resolve) => resolve(axios.post(`${api}/upload`, file, config)));
    }
}

export default new UploadSvc();

uploadDataset将接受一个file，然后以form-data的形式发送后端的相应路径。

接下来我们将UploadSvc引入UploadFile.js中，并加上其他东西：

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";

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
}; //表单的整体布局
const tailLayout = {
    wrapperCol: { offset: 16, span: 8 },
}; //取消和确定按钮的布局

const { TextArea } = Input;

export default function UploadFile(props) {
    const [form] = Form.useForm(); //用于之后取数据
    const [fileList, setFileList] = useState(null); //文件列表
    const [fileName, setFileName] = useState(null); //文件名
    const [uploadName, setUploadName] = useState(null); //文件全名（包含扩展名）
    const [uploading, setUploading] = useState(false); //是否在上传中

    console.log(uploadName)

    const handleSubmit = values => {
        //处理表单提交
        console.log(values)
        props.handleCancel();
    }

    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);
            setUploadName(files[0]["name"]); //设置全名
        }
    }

    const handleUpload = () => {
        //处理手动上传
        const formData = new FormData();
        if (fileList && fileName !== "") {
            let file = fileList[0]
            formData.append('file', file.originFileObj, uploadName); //一定要用file.originFileObj！！！
            setUploading(true) //设置状态为上传中

            UploadSvc.uploadDataset(formData)
            .then(response => {
                message.success(`文件 ${uploadName} 已上传`, 2) //成功的提示消息将持续2秒
                setUploading(false) //重置上传状态
            })
        } 
    }

    useEffect(() => {
        //实时更新
        form.setFieldsValue({
            name: fileName,
        });
    }, [fileName]);

    return (
        <>
            <Form 
            {...layout}
            form={form}
            name="upload_file"
            onFinish={handleSubmit}>

                <Form.Item
                label="文件名称"
                name="name"
                rules={[{ required: true,
                    message: "请输入文件名" }]}>
                    <Input/>
                </Form.Item>

                <Form.Item
                label="备注"
                name="desc"
                rules={[{ required: false,
                    message: "请输入备注" }]}>
                    <TextArea rows={4}/>
                </Form.Item>

                <Form.Item
                label="上传文件"
                name="file"
                rules={[{ required: true,
                    message: "请上传文件" }]}>
                    <Upload
                    onChange={handleChange}
                    fileList={fileList}>
                        <Button icon={<UploadOutlined />}>开始上传</Button>
                    </Upload>
                    <Button
                    type="primary"
                    onClick={handleUpload}
                    disabled={fileList === null || fileList.length === 0}
                    loading={uploading}
                    style={{ marginTop: 16 }}
                    >
                    {uploading ? "上传中..." : "开始上传"}
                    </Button>
                </Form.Item>

                <Form.Item 
                {...tailLayout}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            确认
                        </Button>
                        <Button onClick={props.handleCancel}>
                            取消
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </>
    )
}

这里千万要注意的是，我们使用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，发现成功上传了新的文件：

最后，加上一点细节：

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";

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
}; //表单的整体布局
const tailLayout = {
    wrapperCol: { offset: 16, span: 8 },
}; //取消和确定按钮的布局

const { TextArea } = Input;

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 handleSubmit = values => {
        //处理表单提交
        console.log(values)
        props.handleCancel();
    }

    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"]); //设置全名
        }
    }

    const handleUpload = () => {
        //处理手动上传
        const formData = new FormData();
        if (fileList && fileName !== "") {
            let file = fileList[0]
            formData.append('file', file.originFileObj, uploadName); //一定要用file.originFileObj！！！
            setUploading(true) //设置状态为上传中

            UploadSvc.uploadDataset(formData)
            .then(response => {
                message.success(`文件 ${uploadName} 已上传`, 2) //成功的提示消息将持续2秒
                setUploading(false) //重置上传状态
                form.setFieldsValue({
                    file: true //满足data的required: true
                })
            })
        } 
    }

    useEffect(() => {
        //实时更新
        form.setFieldsValue({
            name: fileName,
        });
    }, [fileName]);

    return (
        <>
            <Form.Provider
            onFormChange={
                () => uploadName && setUploadName(form.getFieldValue('name') + '.' + extName)
            }>
                <Form 
                {...layout}
                form={form}
                name="upload_file"
                onFinish={handleSubmit}>

                    <Form.Item
                    label="文件名称"
                    name="name"
                    rules={[{ required: true,
                        message: "请输入文件名" }]}>
                        <Input/>
                    </Form.Item>

                    <Form.Item
                    label="备注"
                    name="desc"
                    rules={[{ required: false,
                        message: "请输入备注" }]}>
                        <TextArea rows={4}/>
                    </Form.Item>

                    <Form.Item
                    label="上传文件"
                    name="file"
                    rules={[{ required: true,
                        message: "请上传文件" }]}>
                        <Upload
                        onChange={handleChange}
                        beforeUpload={file => {
                            fileList && setFileList([...fileList, file])
                            return false;
                        }}
                        fileList={fileList}>
                            <Button icon={<UploadOutlined />}>开始上传</Button>
                        </Upload>
                        <Button
                        type="primary"
                        onClick={handleUpload}
                        disabled={fileList === null || fileList.length === 0}
                        loading={uploading}
                        style={{ marginTop: 16 }}
                        >
                        {uploading ? "上传中..." : "开始上传"}
                        </Button>
                    </Form.Item>

                    <Form.Item 
                    {...tailLayout}>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                确认
                            </Button>
                            <Button onClick={props.handleCancel}>
                                取消
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Form.Provider>
        </>
    )
}

通过给Upload添加beforeUpload来避免触发默认上传行为（Not Found报错，文件名发红）。

此外，由于上传文件（file部分）的required是true，也就是说是表单中必须要填写的内容，如果我们上传完就此提交，会报错，导致无法提交表单：

我们需要在handleUpload中给Form的file部分设置一个值来满足required的要求。这样一来，我们就可以顺利提交了：

 一套比较完整的文件上传就做好了。

代码见：

https://github.com/SilenceGTX/upload_file