reactjsからのファイルのアップロードが機能しません。 POSTが呼び出され、ファイルがアップロードされませんでした。

Question

以下は私のファイルアップロード用のコードです。

<form encType="multipart/form-data" action=""> 
    <input type="file" name="fileName" defaultValue="fileName"></input> 
    <input type="button" value="upload" onClick={this.handleClick.bind(this)}></input> 
</form> 


handleClick(){ 
      let deliveryId = this.props.params.deliveryId; 
      var data = new FormData(); 
      var imagedata = document.querySelector('input[type="file"]').files[0]; 
      data.append("data", imagedata); 
      console.log('Data', data); 

      fetch(apiBaseUrl, { 
       mode: 'no-cors', 
       method: "POST", 
       body: JSON.stringify({ 
        'item_file': data, 
        'delivery_id': deliveryId, 
        'description': 'test description' 
       }) 
      }).then(function (res) { 
       if (res.ok) { 
        alert("Perfect! "); 
       } else if (res.status == 401) { 
        alert("Oops! "); 
       } 
      }, function (e) { 
       alert("Error submitting form!"); 
      }); 
     } 

「画像データ」にファイルの詳細が表示されていますが、「データ」が空になっています。私はなぜ 'データ'が空であるのか理解できません。だから、バックエンドコールが失敗しているのです。

サーバに行く要求ペイロードが後に送信されます。次：

{item_file：{}、delivery_id： "eeb9422e-9805-48eb-a8be-ad2e27f3f643"、説明： "テストの説明"}

Answer 1

FormData自体を使用して、deliveryIdのような追加のパラメータでファイルをアップロードすることができます。そして、ファイルをストリングすることはできません。

handleClick() { 
    let deliveryId = this.props.params.deliveryId; 
    var imagedata = document.querySelector('input[type="file"]').files[0]; 

    var data = new FormData(); 
    data.append("item_file", imagedata); 
    data.append('delivery_id', deliveryId); 
    data.append('description', 'test description'); 

    fetch(apiBaseUrl, { 
     mode: 'no-cors', 
     method: "POST", 
     body: data 
    }).then(function (res) { 
     if (res.ok) { 
      alert("Perfect! "); 
     } else if (res.status == 401) { 
      alert("Oops! "); 
     } 
    }, function (e) { 
     alert("Error submitting form!"); 
    }); 
}