web-dev-qa-db-ja.com

Axiosでノードjsに画像を送信するにはどうすればよいですか？

Axiosを使用して画像の配列（または単一の画像）をノードに送信する方法はありますか？

私が使用しているaxiosコード（フロントエンドでreact jsを使用しています）：


onFormSubmit(event){
    event.preventDefault();
    let payload = this.state;
    console.log("in onFormSubmit!!! with state: ", this.state, "and payload: ", payload);
    axios.post('/api/art', payload)
    .then(function(response){
    console.log('saved successfully')
  });

私が行った調査は、おそらくaxiosを使用してノードに画像ファイルを送信するサポートされた方法がないことを示唆していますが、これは私には奇妙に思えます。方法はありますか？

javascriptnode.jsexpressreactjsaxios
15
J. Bones

これが私がこれを適切に動作させる方法です。 FormDataというオブジェクトを使用する必要がありました。私はインポートを使用しました：

import FormData from 'form-data'

もちろん、このインポートの前に、npm installを実行する必要がありました。

npm install --save form-data

すべてのことを行った後、アクション内でどのように使用したかを次に示します。

let data = new FormData();
data.append('file', file, file.fileName);

return (dispatch) => {
axios.post(URL, data, {
  headers: {
    'accept': 'application/json',
    'Accept-Language': 'en-US,en;q=0.8',
    'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
  }
})
  .then((response) => {
    //handle success
  }).catch((error) => {
    //handle error
  });
};}

ここで注意すべき重要な部分は次のとおりです。

  1. データオブジェクトがaxios.post呼び出しに渡された後、いくつかのヘッダーを構成オブジェクトとして含めました。ここに含めるコンテンツタイプが重要です。 multipart/form-dataコンテンツタイプを送信しています。
  2. そのコンテンツタイプヘッダー内に、先ほど作成したデータオブジェクトから派生した境界も追加しました。
  3. ここで使用される「ファイル」は、アクションに渡したファイルオブジェクトです。オブジェクトに使用した名前です。ここで好きなものを使用できます。

これがお役に立てば幸いです。これで、バックエンド（私の場合は休憩サービス-ポストコールを介して）に画像を送信しようとしていた問題をすべて解決できました。

14
Cmontalvo80

はい、axiosリクエストでコンテンツタイプを設定する必要があります。

axios.put(url, imageFile, {
  headers: {
    'Content-Type': imageFile.type
  }
});

ここで、imageFileはHTML5ファイル（ https://developer.mozilla.org/en/docs/Web/API/File ）で、これはあなたのケースの画像です。

11
Yangshun Tay

実装方法は次のとおりです。

onFormSubmit(event){
    var form = new FormData();
    files.forEach(file => {
        form.append(file.name, file);
    });
    form.append('foo', 'bar');
    axios.post('/api/art', form)    
});

ノードjsサーバーでは、マルチパート要求を処理するミドルウェアを使用してください。 multer を使用しました。

エンドポイントでの私の結果は次のとおりです。

req.body - { foo: 'bar' }
req.files - { 
    'r1.jpg': { 
      fieldname: 'r1.jpg',
      originalname: 'r1.jpg',
      name: 'e2f4b9874fd7d6115b9f7440b9ead3a0.jpg',
      encoding: '7bit',
      mimetype: 'image/jpeg',
      path: '/tmp/e2f4b9874fd7d6115b9f7440b9ead3a0.jpg',
      extension: 'jpg',
      size: 45641,
      truncated: false,
      buffer: null 
    }, ...
}
4
Volodymyr Synytskyi

これを手動で行う代わりに、 react-dropzone というライブラリを使用することができます。だから基本的にあなたがする必要があるのは：-

import React,{Component} from 'react';
import Dropzone from 'react-dropzone';
import request from 'superagent';

class DropZone extends Component{

  onDrop(files){
    var file = new FormData();
    file.append('name',files[0])
    var req=request
              .post('http://localhost:8000/api/v0/image/')
              .send(file);
    req.end(function(err,response){
        console.log("upload done!!!!!");
    });
  }

  render(){
    return(
      <div>
        <Dropzone onDrop={this.onDrop}>
          <div>Try dropping some files here, or click to select files to upload.</div>
        </Dropzone>
      </div>
          );
  }
}

Git repoの here を確認できます。私はこれをDjangoで実装しましたが、バックエンドが問題になるとは思わない、ノードを使用できます

2
Harkirat Saluja

HTML5では、 FormData()を使用して、フォームフィールドとその値を表すキー/値ペアのセットを構築できます送信したい。ほとんどの場合、ユーザーがフォームを送信するときのように、使用するメソッドは FormData.set() であり、2つのフォームで manipulated になります。

このメソッドには、2つのパラメーターバージョンと3つのパラメーターバージョンの2つのバージョンがあります。

formData.set（name、value）;

formData.set（name、value、filename）;

データオブジェクトを構築したら、HTTP POST=要求にマルチパートコンテンツタイプヘッダーを指定して、ファイルをサーバーに送信できるようにすることを忘れないでください。

以下は私が言ったことの要約です：

onFormSubmit(event){
    let formData = new FormData() // instantiate it
    // suppose you have your file ready
    formData.set('file', yourFile)
    // add some data you collected from the input fields
    formData.set('data1', dataInputField1) // suppose you got dataInputField1 from your HTML5 form input
    axios.post('/api/art', formData,
      headers: {
       'content-type': 'multipart/form-data' // do not forget this 
      })
  })
1
Begueradj