react使用antd的上傳組件實現文件表單一起提交功能(完整代碼)

Posted on by

最近在剛剛開始使用react做項目，非常不熟練，非常小白。小白同學可以閱讀瞭，因為我會寫的非常簡單，直白。

項目中需要實現表單中帶附件提交，上傳文件不單獨保存調接口。

import { Form, Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
  
  const normFile = (e) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  const Demo = () => {
    const onFinish = (values) => {
      console.log('Received values of form: ', values);
    };
  
    return (
      <Form
        name="validate_other"
        onFinish={onFinish}
        initialValues={{
          'input-number': 3,
          'checkbox-group': ['A', 'B'],
          rate: 3.5,
        }}
      >
        <Form.Item
          name="upload"
          label="Upload"
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload name="logo" action="/upload.do" listType="picture">
            <Button icon={<UploadOutlined />}>Click to upload</Button>
          </Upload>
        </Form.Item>
      </Form>
    );
  };
  
  ReactDOM.render(<Demo />, mountNode);

這裡是一個表單裡面包含瞭一個上傳文件功能。（其實這裡的代碼就是Antd官方文檔的例子，我隻進行瞭刪除多餘部分，別的都是原樣放著）。

下面做一下解釋。

首先我們要思考怎麼實現讓文件不要自動上傳。antd文檔是有給一個方法的就是beforeUpload，當beforeUpload方法返回false時就會停止文件的上傳。

以上就可以停止文件的自動上傳。接下來，我們考慮怎麼把上傳的文件獲取並存在傳給後端的參數中。

這部分代碼就是上傳代碼的方法，因為我們需要上傳文件和表單一起提交。所以我們在這個方法裡進行一些修改，把文件存在formData對象裡。這裡先說明一下formData對象，主要就是用來傳文件給後端用的。

先new一個formData對象，在把文件append進去，這樣就已經把上傳的文件存在瞭formData裡。

表單中其它數據也可以通過同種方法存在formData中，把formData傳給後端即可。

此時還有一個需要註意的問題。

fetch(url, {

        //fetch請求

        method: 'POST',

        body: formData,

})

或

 axios({ //axios
        method: 'post',
        url: url,
        data: formData,
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

一定要設置瞭，才可以傳參數成功，不然調用接口的時候是不會成功帶參數的。

什麼樣子是成功帶瞭參數呢，可以在相關頁面點擊F12查看，network，最下方會有Form Data，一欄，會展示所有傳過去的參數。

最終代碼如下：

import { Form, Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
  
  const normFile = (e) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  const beforeUpload = ({fileList}) => {
      return  false;
  }
  const Demo = () => {
    const onFinish = (values) => {
      console.log('Received values of form: ', values);
    };
  
    return (
      <Form
        name="validate_other"
        onFinish={onFinish}
        initialValues={{
          'input-number': 3,
          'checkbox-group': ['A', 'B'],
          rate: 3.5,
        }}
      >
        <Form.Item
          name="upload"
          label="Upload"
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload name="logo"  
            beforeUpload={beforeUpload}
          >
            <Button icon={<UploadOutlined />}>Click to upload</Button>
          </Upload>
        </Form.Item>
      </Form>
    );
  };
  
  ReactDOM.render(<Demo />, mountNode);

到此這篇關於react使用antd的上傳組件實現文件表單一起提交的文章就介紹到這瞭,更多相關react實現文件表單提交內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：