web-dev-qa-db-ja.com

反応ネイティブでフェッチを使用してマルチパート/フォームデータを投稿する方法は？

reference Image: Postman form

そのようなフォームデータを投稿したいです。

画像ファイルデータを送信するために何を準備すればよいですか？

uri、タイプ、ファイル名、サイズがあります。

その後、フェッチを使用します。

ヘッダーのコンテンツタイプは「multipart/formdata」です

助けてくれてありがとう

react-nativefetchreact-native-android
5
jehee choi

次のようなアップロード関数が必要です。

upload(url, data) {
  let options = {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    method: 'POST'
  };

  options.body = new FormData();
  for (let key in data) {
    options.body.append(key, data[key]);
  }

  return fetch(requestUrl, options)
      .then(response => {
        return response.json()
          .then(responseJson => {
            //You put some checks here
            return responseJson;
          });
      });
}

そして、あなたはそれをこのように呼び出して、画像ブロブパスを送信します：

this.upload('http://exampleurl.com/someApiCall', {
  file: {
    uri: image.path,
    type: image.mime,
    name: image.name,
  }
}).then(r => {
  //do something with `r`
});
12
Mikayel Saghyan

React Nativeコード

fetch("url" ,{

    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },

    method:'POST',

    body: JSON.stringify(this.state.imageholder)

}).catch(function(error) {

console.log('There has been a problem with your fetch operation: ' + error.message);

throw error;

});

スプリングブートコード

 @PostMapping(value="/",consumes = MediaType.APPLICATION_JSON_VALUE)
 public ResponseEntity<?> saveCustomerOrder(@RequestBody String[] file) throws SerialException, SQLException {

    TestImg imgObj=null;

    for (String img : file) {
        imgObj=new TestImg();
        byte[] decodedByte = Base64.getDecoder().decode(img);
        Blob b = new SerialBlob(decodedByte);
        imgObj.setImg(b);
        testRepo.save(imgObj);

    }
0
James Siva

次のように、FormDataのインスタンスを作成し、それをフェッチするボディとして渡す必要があります。

const data = new FormData()
data.append("something", something)

fetch(url, { method: 'POST', body: form })
0
Sam Pettersson