antd upload随表单提交

### 文件与表单数据一同提交的最佳实践

在 Ant Design 中，为了使 `Upload` 组件能够与其他表单字段的数据一并提交，需遵循特定的设计模式。通过将 `Upload` 集成至 `Form` 表单中，并利用 `getFieldDecorator` 方法绑定文件输入项，可确保文件和其他表单数据能同步处理。

#### 使用 getFieldDecorator 进行集成

对于需要上传文件的场景，在 `<Form.Item>` 标签内部调用 `{getFieldDecorator}` 函数完成对文件域的装饰操作[^5]。此函数接收两个参数：一是用于标识该控件名称的字符串；二是配置对象，其中包含初始值、验证规则等设置。针对文件上传而言，通常无需指定 `initialValue` 属性，因为每次选择新文件时会自动更新状态。

<Form.Item>
    {getFieldDecorator('file', {
        valuePropName: 'fileList',
        getValueFromEvent: normFile,
    })(
        <Upload 
            name="logo"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={{showRemoveIcon:true}}
            beforeUpload={() => false}
            onChange={handleChange}>
                {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
        </Upload>,
    )}
</Form.Item>

上述代码片段展示了如何创建一个图片类型的文件上传器，并将其纳入到表单体系之中。注意这里设置了 `beforeUpload` 事件处理器返回 `false` 来阻止默认行为，即不立即执行实际的 HTTP 请求，而是等待整个表单提交后再统一发送所有数据[^2]。

#### 处理文件列表变化

每当用户选择了新的文件或移除了现有文件后，都会触发 `onChange` 回调函数。此时应该捕获最新的文件列表信息以便后续使用：

const handleChange = info => {
    let fileList = [...info.fileList];
    
    // 对于图片预览功能来说，仅保留最近一次上传的结果即可
    fileList = fileList.slice(-1);
  
    setFieldsValue({ file: fileList });
};

这段逻辑负责截取最新的一份文件记录作为最终待上传的内容，并借助 `setFieldsValue()` 更新对应表单项的状态，从而保持视图层面上的选择结果一致[^3]。

#### 提交表单时的操作

当点击按钮触发表单提交动作时，应先调用 `validateFields()` 方法检验各字段的有效性。一旦确认无误，则可以通过遍历获取完整的表单数据集，其中包括已选中的文件实例。最后构建合适的 payload 结构体并通过 AJAX 发送出去。

<form onSubmit={(e) => handleSubmit(e)}>
...
</form>

// 定义 submit handler
const handleSubmit = e => {
    e.preventDefault();
    validateFields((err, values) => {
        if (!err) {
            const formData = new FormData();

            Object.keys(values).forEach(key => {
                if (key === "file") {
                    values[key].map(item => formData.append("files[]", item.originFileObj));
                } else {
                    formData.append(key, values[key]);
                }
            });

            axios.post('/api/endpoint', formData, {
                headers: {'Content-Type': 'multipart/form-data'}
            }).then(response => console.log(response.data))
                 .catch(error => console.error(error));
        }
    });
};

以上就是关于如何在 Ant Design 中实现文件上传并与常规表单数据共同提交的技术方案概述。