30

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 を使用してイメージ ファイルをノードに送信する方法がサポートされていない可能性がありますが、これは奇妙に思えます。方法はありますか？

4

6 に答える 6

1

これを手動で行う代わりに、これには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 リポジトリを確認できます。これをdjangoに実装しましたが、バックエンドが問題になるとは思いません。ノードを使用できます

于 2016-09-23T15:16:08.447 に答える
0

画像をバックエンドにアップロードするために必要なのは、ヘッダーmultipart/form-data、画像の詳細 ( uri、、 ) name、typeおよびフォーム データだけです。

import FormData from 'form-data'

const config = {
   headers: {

    'Content-Type': 'multipart/form-data'

   }
}


const data = new FormData();

data.append('image', {
    uri: image.uri,
    name: image.uri.split('/').pop(), //split the uri at / and get the last element of the resulting array which actually is the name with the image extention (e.g, abc.jpg)
   type: image.type // type needs to be modified. keep reading
})

ここが重要なポイントです。多くの場合、画像の詳細からのタイプは完全なタイプではなく (たとえば、「image」のみを返しますが、実際のタイプは「image/jpeg」です)、結果はnetwork error.

正確なタイプを取得するために、サードパーティのパッケージを使用できます。

たとえば、 を使用できますmime。

import mime from 'mime'

type: mime.getType(image.uri)

最後に、リクエストを送信するだけです。

axios.post('url', data, config)
.then(...)
.catch(...)

画像だけでなく、動画も全く同じ手順でアップロードできます。

于 2021-06-15T13:47:54.263 に答える