react 는 antd 의 업로드 구성 요 소 를 사용 하여 파일 폼 과 함께 제출 하 는 기능(전체 코드)을 실현 합 니 다.

최근 에 리 액 트 를 사용 하여 프로젝트 를 하기 시 작 했 는데 매우 미숙 하고 아주 하 얗 습 니 다.백 군 학 우 는 읽 을 수 있 게 되 었 다.왜냐하면 나 는 매우 간단 하고 직 설 적 으로 쓸 수 있 기 때문이다.
프로젝트 에 서 는 폼 에 첨부 파일 을 제출 해 야 하 며,업로드 파일 은 인 터 페 이 스 를 따로 저장 하지 않 습 니 다.

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 실현 파일 폼 제출 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!