本文小編為大家詳細(xì)介紹“react怎么使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react怎么使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元濱海新區(qū)做網(wǎng)站,已為上家服務(wù),為濱海新區(qū)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

項(xiàng)目中需要實(shí)現(xiàn)表單中帶附件提交，上傳文件不單獨(dú)保存調(diào)接口。

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

這里是一個(gè)表單里面包含了一個(gè)上傳文件功能。（其實(shí)這里的代碼就是Antd官方文檔的例子，我只進(jìn)行了刪除多余部分，別的都是原樣放著）。

下面做一下解釋。

首先我們要思考怎么實(shí)現(xiàn)讓文件不要自動(dòng)上傳。antd文檔是有給一個(gè)方法的就是beforeUpload，當(dāng)beforeUpload方法返回false時(shí)就會(huì)停止文件的上傳。

以上就可以停止文件的自動(dòng)上傳。接下來，我們考慮怎么把上傳的文件獲取并存在傳給后端的參數(shù)中。

這部分代碼就是上傳代碼的方法，因?yàn)槲覀冃枰蟼魑募捅韱我黄鹛峤弧Ｋ晕覀冊(cè)谶@個(gè)方法里進(jìn)行一些修改，把文件存在formData對(duì)象里。這里先說明一下formData對(duì)象，主要就是用來傳文件給后端用的。

先new一個(gè)formData對(duì)象，在把文件append進(jìn)去，這樣就已經(jīng)把上傳的文件存在了formData里。

表單中其它數(shù)據(jù)也可以通過同種方法存在formData中，把formData傳給后端即可。

此時(shí)還有一個(gè)需要注意的問題。

fetch(url, {

        //fetch請(qǐng)求

        method: 'POST',

        body: formData,

})

或

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

一定要設(shè)置了，才可以傳參數(shù)成功，不然調(diào)用接口的時(shí)候是不會(huì)成功帶參數(shù)的。

什么樣子是成功帶了參數(shù)呢，可以在相關(guān)頁面點(diǎn)擊F12查看，network，最下方會(huì)有Form Data，一欄，會(huì)展示所有傳過去的參數(shù)。

最終代碼如下：

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的上傳組件實(shí)現(xiàn)文件表單一起提交功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：react怎么使用antd的上傳組件實(shí)現(xiàn)文件表單一起提交功能
本文路徑：http://www.2m8n56k.cn/article42/iechhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、建站公司、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)