画像ファイルをサーバにアップロードnode.js express axios

Question

イメージファイルをバックエンドにアップロードして保存しようとしましたが、スタックしません。私は反応フロントエンドからエクスプレスAPIを呼び出すためにAxiosを使用しています。

フロントエンドポート3000 バックエンドで実行するには、私がmultipart/form-dataにヘッダを設定しようとすると、私はまだ空の持っているポート8080

export function updateSociete(data){ 
return dispatch => { 
    // Init loading... 
    dispatch(setLoading()) 

    console.log(data) // File data is populated 
    axios.post(`${API_ENDPOINT}api/societe/update`, 
     { 
      data: data, 
     }, 
     { headers: { 
      'Content-Type': 'Application/json', 
      'x-access-token': localStorage.getItem('token') 
     } 
    }) 
    .then(function (response) { 
     return response.data 
    }) 
    .then(societe => { 
     // do something 
    }) 
} 

エクスプレスバックエンド

router.post('/update', (req, res, next) => { 
    var data = req.body; 

    console.log(data) // No file data here 

を実行しますデータ。 Axiosがデータオブジェクトをバックエンドに送信すると、何かが発生し、バックエンドはファイルデータが必要な通常のデータを受け取ります。郵便配達をテストする場合

は、私はすべてのデータファイルなど。あなたはFORMDATAに変換することができます

Answer 1

を受けます。

export function updateSociete(data){ 
return dispatch => { 
// Init loading... 
dispatch(setLoading()) 

console.log(data) // File data is populated 
const formData = new FormData(data) 
axios.post(`${API_ENDPOINT}api/societe/update`, 
    { 
     data: formData, 
    }, 
    { headers: { 
     'Content-Type': 'Application/json', 
     'x-access-token': localStorage.getItem('token') 
    } 
}) 
.then(function (response) { 
    return response.data 
}) 
.then(societe => { 
    // do something 
}) 
} 

PS：

あなたは次を試すことができます私はBASE64にファイルを変換ジュスト、あなたがこの
<form onSubmit={you upload function logic}> .... </form>

今のUsing_FormData_Objects