[reactjs] 양식 데이터 전송 요청

axios POST요청이 컨트롤러의 URL에 충돌하지만 null 값을 POJO 클래스로 설정하고 크롬에서 개발자 도구를 사용할 때 페이로드에 데이터가 포함됩니다. 내가 뭘 잘못하고 있죠?

Axios POST 요청 :

var body = {
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
}

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

브라우저 응답 :

헤더를 다음과 같이 설정하면

headers:{
  Content-Type:'multipart/form-data'
}

요청에서 오류가 발생합니다

multipart / form-data 게시 오류 컨텐츠 유형 헤더에 경계가 없습니다.

우편 배달부에서 동일한 요청을하면 정상적으로 작동하고 POJO 클래스에 값을 설정합니다.

누구든지 경계를 설정하는 방법이나 축을 사용하여 양식 데이터를 보내는 방법을 설명 할 수 있습니까?

답변

다음 과 같이 FormData () 를 사용하여 축 데이터를 게시 할 수 있습니다 .

var bodyFormData = new FormData();

그런 다음 보내려는 양식에 필드를 추가하십시오.

bodyFormData.set('userName', 'Fred');

이미지를 업로드하는 경우 사용할 수 있습니다 .append

bodyFormData.append('image', imageFile);

그리고 당신은 axios post 방법을 사용할 수 있습니다 (그에 따라 수정할 수 있습니다)

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

자세한 내용은 여기를 참조하십시오

답변

querystring을 확인하십시오 .

다음과 같이 사용할 수 있습니다.

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

답변

필자의 경우 다음과 같이 헤더에 경계 를 추가해야했습니다 .

const form = new FormData();
    formData.append(item.name, fs.createReadStream(pathToFile));

    const response = await axios({
        method: 'post',
        url: 'http://www.yourserver.com/upload',
        data: form,
        headers: {
        'content-type': `multipart/form-data; boundary=${form._boundary}`,
        },
    });

이 솔루션은 React Native로 작업하는 경우에도 유용합니다.

답변

이진 파일 업로드 (여러)

Node.js

를 통해 파일 multipart/form-data, 특히 여러 이진 파일 을 게시하려는 경우 상황이 복잡해집니다 . 아래는 실제 예입니다.

const FormData = require('form-data')
const fs = require('fs')
const path = require('path')

const formData = new FormData()
formData.append('files[]', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('files[]', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData, {
  headers: formData.getHeaders()
})

headers: {'Content-Type': 'multipart/form-data' }내가 선호하는 대신headers: formData.getHeaders()
내가 사용 async하고 await당신이 그들처럼하지 않으면 위의, 당신은 일반 약속 문으로 변경할 수 있습니다

아래에 새로 추가 된 컨텐츠 :

브라우저

브라우저 FormData는 NPM 패키지 ‘form-data’와 다릅니다. 다음 코드는 브라우저에서 작동합니다.

HTML :

<input type="file" id="image" accept="image/png"/>

자바 스크립트 :

const formData = new FormData()

// add a non-binary file
formData.append('files[]', new Blob(['{"hello": "world"}'], { type: 'application/json' }), 'request.json')

// add a binary file
const element = document.getElementById('image')
const file = element.files[0]
formData.append('files[]', file, file.name)
await rc.post('/restapi/v1.0/account/~/extension/~/fax', formData)

답변

훨씬 더 간단합니다.

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

답변

Axios에서 application / x-www-form-urlencoded 형식 사용

기본적으로, axios는 JavaScript 객체를 JSON으로 직렬화합니다. 대신 application / x-www-form-urlencoded 형식으로 데이터를 보내려면 다음 옵션 중 하나를 사용할 수 있습니다.

브라우저

브라우저에서 다음과 같이 URLSearchParams API를 사용할 수 있습니다.

const params = new URLSearchParams ();

params.append ( ‘param1’, ‘value1’);

params.append ( ‘param2’, ‘value2’);

axios.post ( ‘/ foo’, 매개 변수);

URLSearchParams는 모든 브라우저에서 지원되지는 않지만 (caniuse.com 참조) 사용 가능한 폴리 필이 있습니다 (전역 환경을 폴리 필해야합니다).

또는 qs 라이브러리를 사용하여 데이터를 인코딩 할 수 있습니다.

const qs = require ( ‘qs’);

axios.post ( ‘/ foo’, qs.stringify ({ ‘bar’: 123}));

또는 다른 방법으로 (ES6)

‘qs’에서 qs 가져 오기;

const 데이터 = { ‘bar’: 123};

const 옵션 = {

방법 : ‘POST’,

헤더 : { ‘content-type’: ‘application / x-www-form-urlencoded’},

데이터 : qs.stringify (data),

url,};

축 (옵션);

답변

2020 ES6 수행 방식

html 형식으로 데이터에 바인딩했습니다.

데이터:

form: {
   name: 'Joan Cap de porc',
   email: 'fake@email.com',
   phone: 2323,
   query: 'cap d\ou'
   file: null,
   legal: false
},

제출 :

async submitForm() {
  const formData = new FormData()
  Object.keys(this.form).forEach((key) => {
    formData.append(key, this.form[key])
  })

  try {
    await this.$axios.post('/ajax/contact/contact-us', formData)
    this.$emit('formSent')
  } catch (err) {
    this.errors.push('form_error')
  }
}