2016-11-19 82 views
0

所以我真的很難讓文件上傳工作。我認爲這不會像以前那樣具有挑戰性。反應節點文件上傳器

<input type="file" id="server-avatar-file" className="file-input" accept=".jpg,.jpeg,.png" onChange={this.handleChange} style={{position: "absolute", top: "0px", left: "0px", width: "100%", height: "100%", opacity: "0", cursor: "pointer"}} /> 

這裏是我的提交表單數據:

handleSubmit = (event) => { 
     event.preventDefault(); 

     axios.post('/api/v1/testing/upload', 
      this.state.file) 
      .then(function (response) { 
      console.log(response); 
      }) 
      .catch(function (error) { 
      console.log(error); 
     }); 
    }; 

我用打雜,多一切我能想到的

所以我會用簡單的HTML元素開始。

但是我相信這個問題是源於我的前端沒有發送所有正確的信息到我的後端。

這就是this.state.file有,因爲它的價值:

enter image description here

我明白bodyParser在節點不解析的文件類型,我不熟悉如何分析它們在服務器上。我想通過上傳到我的文件系統來測試它,但是想要轉到生產中的CDN,所以我很容易做到這一點,這將非常棒!

+1

您是否嘗試過使用FormData實例而不是原始的'File'對象?那個'busboy','multer'等應該可以正常工作。 – mscdex

+0

哇,我覺得真的很愚蠢,就是這樣,你會認爲我會在所有的搜索結果中都遇到這種情況。 非常感謝! –

回答

1

busboy,multer和其他多部分解析模塊需要正確格式化的多部分/表格數據請求。使用axios發送類似請求的一種簡單方法是改爲傳遞FormData實例而不是原始FileBlob實例作爲數據參數。