react怎么使用antd的上傳組件實現文件表單一起提交功能

# React怎么使用Ant Design的上傳組件實現文件表單一起提交功能

## 前言

在Web應用開發中，文件上傳是常見的功能需求。Ant Design（簡稱antd）作為流行的React UI組件庫，提供了強大的Upload組件來處理文件上傳。但實際業務中經常需要將文件和其他表單字段一起提交，這需要特定的實現方式。本文將詳細介紹如何在React項目中結合antd的Upload組件和表單，實現文件與其他表單數據的一并提交。

## 一、準備工作

### 1.1 安裝必要依賴

首先確保你的項目已經安裝了React和antd：

```bash
npm install react antd
# 或
yarn add react antd

1.2 引入所需組件

在需要使用上傳功能的文件中，引入必要的antd組件：

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

二、基礎文件上傳實現

2.1 基本Upload組件使用

先看一個最簡單的文件上傳實現：

<Upload
  action="https://www.mocky.io/v2/5cc8019d300000980a055e76" // 上傳地址
  onChange={info => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 文件上傳成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 文件上傳失敗`);
    }
  }}
>
  <Button icon={<UploadOutlined />}>點擊上傳</Button>
</Upload>

2.2 上傳限制配置

實際應用中通常需要添加限制：

<Upload
  action="..."
  beforeUpload={(file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上傳JPG/PNG文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('圖片必須小于2MB!');
    }
    return isJpgOrPng && isLt2M;
  }}
>
  {/* ... */}
</Upload>

三、結合表單實現文件與數據一起提交

3.1 使用antd Form包裹Upload

要實現文件與表單數據一起提交，需要使用antd的Form組件：

const [form] = Form.useForm();

<Form form={form} onFinish={handleSubmit}>
  <Form.Item name="username" label="用戶名">
    <Input />
  </Form.Item>
  
  <Form.Item name="avatar" label="頭像" valuePropName="fileList">
    <Upload 
      action="..."
      listType="picture"
      maxCount={1}
    >
      <Button icon={<UploadOutlined />}>上傳頭像</Button>
    </Upload>
  </Form.Item>
  
  <Button type="primary" htmlType="submit">提交</Button>
</Form>

3.2 處理表單提交

表單提交時需要特殊處理文件字段：

const handleSubmit = async (values) => {
  const formData = new FormData();
  
  // 添加普通字段
  formData.append('username', values.username);
  
  // 處理文件字段
  if (values.avatar && values.avatar[0]) {
    const file = values.avatar[0].originFileObj;
    formData.append('avatar', file);
  }
  
  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
      // 注意不要設置Content-Type，瀏覽器會自動添加multipart/form-data
    });
    
    const result = await response.json();
    message.success('提交成功');
  } catch (error) {
    message.error('提交失敗');
  }
};

四、進階實現方案

4.1 自定義上傳行為

有時需要完全控制上傳過程：

const customRequest = ({ file, onSuccess, onError }) => {
  const formData = new FormData();
  formData.append('file', file);
  
  fetch('your-upload-url', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(result => onSuccess(result, file))
  .catch(error => onError(error));
};

<Upload customRequest={customRequest}>
  {/* ... */}
</Upload>

4.2 多文件上傳處理

處理多個文件的情況：

<Form.Item name="documents" label="文檔" valuePropName="fileList">
  <Upload
    action="..."
    multiple
    beforeUpload={() => false} // 阻止自動上傳
  >
    <Button icon={<UploadOutlined />}>選擇文件</Button>
  </Upload>
</Form.Item>

// 提交處理
const handleSubmit = (values) => {
  const formData = new FormData();
  values.documents.forEach(file => {
    formData.append('documents', file.originFileObj);
  });
  // ...其他處理
};

4.3 顯示上傳進度

添加進度顯示增強用戶體驗：

const [uploading, setUploading] = useState(false);
const [progress, setProgress] = useState(0);

const customRequest = ({ file, onSuccess, onError }) => {
  const formData = new FormData();
  formData.append('file', file);
  
  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const percent = Math.round((event.loaded / event.total) * 100);
      setProgress(percent);
    }
  });
  
  xhr.onload = () => onSuccess(xhr.responseText, file);
  xhr.onerror = () => onError(xhr.statusText);
  
  xhr.open('POST', 'your-upload-url', true);
  xhr.send(formData);
};

return (
  <>
    <Upload customRequest={customRequest}>
      <Button icon={<UploadOutlined />} loading={uploading}>
        {uploading ? `上傳中 ${progress}%` : '上傳文件'}
      </Button>
    </Upload>
  </>
);

五、常見問題與解決方案

5.1 文件自動上傳問題

默認情況下，antd Upload組件在選擇文件后會立即上傳。要阻止這種行為：

<Upload
  beforeUpload={() => false} // 返回false阻止自動上傳
>
  {/* ... */}
</Upload>

5.2 文件列表控制

手動控制文件列表：

const [fileList, setFileList] = useState([]);

<Upload
  fileList={fileList}
  onChange={({ fileList }) => setFileList(fileList)}
>
  {/* ... */}
</Upload>

5.3 跨域問題處理

處理CORS問題時：

const customRequest = ({ file }) => {
  const formData = new FormData();
  formData.append('file', file);
  
  fetch('your-api-endpoint', {
    method: 'POST',
    body: formData,
    credentials: 'include', // 攜帶cookie
    headers: {
      'Accept': 'application/json',
      // 不要設置Content-Type，讓瀏覽器自動設置
    },
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
};

六、完整示例代碼

以下是一個完整的實現示例：

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

const FileUploadForm = () => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);

  const handleSubmit = async (values) => {
    setUploading(true);
    
    try {
      const formData = new FormData();
      formData.append('username', values.username);
      
      if (values.avatar && values.avatar[0]) {
        formData.append('avatar', values.avatar[0].originFileObj);
      }
      
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: formData,
      });
      
      const result = await response.json();
      message.success('提交成功');
      form.resetFields();
      setFileList([]);
    } catch (error) {
      message.error('提交失敗');
    } finally {
      setUploading(false);
    }
  };

  return (
    <Form form={form} onFinish={handleSubmit} layout="vertical">
      <Form.Item
        name="username"
        label="用戶名"
        rules={[{ required: true, message: '請輸入用戶名' }]}
      >
        <Input />
      </Form.Item>
      
      <Form.Item
        name="avatar"
        label="頭像"
        valuePropName="fileList"
        getValueFromEvent={(e) => {
          if (Array.isArray(e)) return e;
          return e && e.fileList;
        }}
      >
        <Upload
          listType="picture"
          maxCount={1}
          beforeUpload={() => false}
          fileList={fileList}
          onChange={({ fileList }) => setFileList(fileList)}
        >
          <Button icon={<UploadOutlined />}>選擇頭像</Button>
        </Upload>
      </Form.Item>
      
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={uploading}>
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default FileUploadForm;

七、總結

通過本文的介紹，我們了解了如何在React項目中使用antd的Upload組件與Form組件結合，實現文件與其他表單數據的一并提交。關鍵點包括：

1. 使用Form.Item包裹Upload組件，并正確設置valuePropName
2. 在表單提交時使用FormData處理文件上傳
3. 合理控制上傳流程和用戶反饋
4. 處理各種邊界情況和異常

這種實現方式既保持了antd組件的優雅API，又能滿足實際業務中復雜表單提交的需求。希望本文能幫助你在項目中順利實現文件上傳功能。 “`