[Stroll] 6일차

1. axios로 이미지 전송 (form 태그 사용)

앤트디자인(ant-design)의 <Form></Form>태그를 사용하여 서버에 전송했을 때는 이미지전송이 정상적으로 되지 않았다. html 을 기본 <form></form>태그를 이용하여 파일을 state에 업데이트해준 뒤, 앤트디자인의 폼 태그 이벤트로 생성되는 (getFieldDecorator에 의해 만들어지는) 객체에 파일을 포함시켜서 서버로 전송했다.

html부분

<form onSubmit={this.onFormSubmit}>
  <h1>File Upload</h1>
  <input type="file" name="img" onChange={this.onChangeFile} />
  <button type="submit">Upload</button>
</form>

javascript 부분

onFormSubmit(e) {
  e.preventDefault();
  formData.append('img', this.state.file);
  console.log('FormData 완성');
}
onChangeFile(e) {
  this.setState({ file: e.target.files[0] });
}

2. 앤트디자인 <Form></Form>태그 사용법

// 객체형태의 formData를 만들어주는 decorator. 
const { getFieldDecorator } = this.props.form;

// getFieldDecorator로 만든 formData에 접근
// submit action이 일어나면 저절로 실행된다
handleSubmit = e => {
  e.preventDefault();
  this.props.form.validateFields((err, values) => {
    if (!err) {
      var loginData = {
        email: values.email,
        password: values.password,
      };
    }
  });
};

<Form onSubmit={this.handleSubmit}>
  <Form.Item>
  </Form.Item>
</Form>