React Native Debuggerを使用して、multipart/form-dataでaxios POSTリクエストを作成する

Question

React Nativeから自分のサーバーにファイルをアップロードしようとしています。しかし、'Content-Type'ヘッダーをmultipart/form-dataに設定できません。私は、ネットワーク要求を監視するように反応するのネイティブデバッガを使用しています

axios({ 
    uri: 'http://localhost:3000', 
    method: 'POST', 
    data: formData, 
    headers: { 
    Accept: 'application/json', 
    'Content-Type': 'multipart/form-data' 
    } 
}); 

：

は、ここに私の単純な要求です。

私はデバッガ内で私のネットワーク要求を見るとき、私はこれを参照してください。

'Content-Type': 'text/plain;charset=UTF-8'

をし、要求ペイロードは、単に[object Object]

ユーザーエージェントである：私は場合 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) ReactNativeDebugger/0.7.13 Chrome/58.0.3029.110 Electron/1.7.9 Safari/537.36

React Native Debuggerでこれを行うことができない場合は、誰でもExpoでテストするための手順を提案できます。

Answer 1

次のようにAxios（0.17.1）の最新バージョンを使用して、ヘッダーに'Content-Type': 'multipart/form-data'でHTTPリクエストを行います。

const formData = new FormData(); 
formData.append('action', 'ADD'); 
formData.append('param', 0); 
formData.append('secondParam', 0); 
formData.append('file', new Blob(['test payload'], { type: 'text/csv' })); 
axios({ 
    url: 'http://localhost:5000/api/hello', 
    method: 'POST', 
    data: formData, 
    headers: { 
    Accept: 'application/json', 
    'Content-Type': 'multipart/form-data' 
    } 
}) 

2つのこと：私はurl、ないuriを使用しています。また、独自のフォームデータとURLを挿入してください。正常に返信されたリクエストを調べると、これはリクエストヘッダーで取得したものです。