web-dev-qa-db-ja.com

axios postフォームデータ送信リクエスト

axios POSTリクエストがコントローラのURLにアクセスしていますが、私のPOJOクラスにnull値を設定しています。クロムで開発者向けツールを実行すると、ペイロードにデータが含まれています。何がおかしいのですか？

Axios POST要求： 

var body = {
    userName: 'Fred',
    userEmail: '[email protected]'
}

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

ブラウザの応答：

enter image description here

ヘッダを次のように設定したとします。

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

要求はエラーをスローします

マルチパート/フォームデータの投稿中にエラーが発生しました。 Content-Typeヘッダーに境界がありません

私が郵便配達員に同じ要求をするならば、それはうまく働いていて、私のPOJOクラスに値を設定します。

境界を設定する方法や、axiosを使用してフォームデータを送信する方法を誰でも説明できますか。

reactjsreact-reduxaxiosajaxformaxios-cookiejar-support
81
Srikanth Gowda

FormData（） likeを使用して、axiosデータを投稿できます。

var bodyFormData = new FormData();

次に、送信したいフォームにフィールドを追加します。

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

画像をアップロードしている場合は、.appendを使用することをお勧めします。

bodyFormData.append('image', imageFile);

そして、あなたはaxios post methodを使うことができます（あなたはそれに応じてそれを修正することができます）

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

もっと読むことができます ここ

137
Aaqib

私の場合、次のように 境界 を ヘッダー に追加する必要がありました。

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を使って作業している場合にもこの解決策が役立ちます。

11
Luiz Dias

クエリ文字列 をチェックしてください。

あなたは次のようにそれを使用することができます：

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

（複数の）バイナリファイルをアップロードする

multipart/form-dataを使ってファイルを投稿したいとき、特に複数のバイナリファイルを投稿したいときは事態は複雑になります。以下は実用的な例です。

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

const formData = new FormData()
formData.append('json', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('attachment', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
formData.pipe(concat({ encoding: 'buffer' }, async data => {
  const r = await rc.post('/restapi/v1.0/account/~/extension/~/fax', data, {
    headers: formData.getHeaders()
  })
  console.log(r.data)
}))
  • headers: {'Content-Type': 'multipart/form-data' }の代わりに私はheaders: formData.getHeaders()を好む
  • 複数のファイルストリームを連結するにはconcat-streamを使う必要があります
  • 私は上記のasyncとawaitを使用しています、あなたがそれらを好まなければあなたはそれらをプレーンな約束ステートメントに変更することができます
5
Tyler Long

さらに簡単：

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: '[email protected]'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
2
thomasL

上記の方法は私にはうまくいきましたが、それは私が頻繁に必要としていたものなので、私はフラットオブジェクトのための基本的な方法を使いました。注、私もVueを使用していてREACTではありませんでした

packageData: (data) => {
  const form = new FormData()
  for ( const key in data ) {
    form.append(key, data[key]);
  }
  return form
}

オブジェクトやファイルがネストされた複雑なデータ構造に遭遇するまで、私にとってはうまくいきました。

packageData: (obj, form, namespace) => {
  for(const property in obj) {
    // if form is passed in through recursion assign otherwise create new
    const formData = form || new FormData()
    let formKey

    if(obj.hasOwnProperty(property)) {
      if(namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }

      // if the property is an object, but not a File, use recursion.
      if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        objectToFormData(obj[property], formData, property);
      } else {
        // if it's a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}
1
Juan Pablo Ugas