react-native FormData上傳不發送正確的數據

Question

我一直在尋找所有可以找到的問題，但看起來沒有人有我的問題。

我正在運行react-native 39，我想上傳圖像。它看起來像是可以使用FormData上傳它。

/** 
* Polyfill for XMLHttpRequest2 FormData API, allowing multipart POST requests 
* with mixed data (string, native files) to be submitted via XMLHttpRequest. 
* 
* Example: 
* 
* var photo = { 
*  uri: uriFromCameraRoll, 
*  type: 'image/jpeg', 
*  name: 'photo.jpg', 
* }; 
* 
* var body = new FormData(); 
* body.append('authToken', 'secret'); 
* body.append('photo', photo); 
* body.append('title', 'A beautiful photo!'); 
* 
* xhr.open('POST', serverURL); 
* xhr.send(body); 
*/ 

使用方法我只是得到[對象的對象]在請求的主體中。 使用fetch而不是xhr我得到一些數據，但現在我期望，沒有圖像，我可以從服務器得到

Answer 1

問題是，表單不知道什麼信息存儲在對象中，你正在嘗試編碼手段，因此它不會從設備中獲取圖片數據，而是隻需找出photo對象可能具有的「正確」表示形式，而這通常是一個字符串。在這種情況下[object Object]。當然，這不會被你的服務器接受。實際上，這發生在所有非原始類型的JavaScript上。您應該先使用JSON.stringify(photo)將其轉換爲JSON字符串。

相反，您可以嘗試的是以FormData可以理解的格式從相機膠捲中檢索圖像數據，例如，在base64中編碼圖像的字符串。這不是React Native自帶的功能，但是快速搜索可以檢索到一些有前途的軟件包。也許看看：

• react-native-image-to-base64
• react-native-upload-from-camera-roll
• this post
• JS.coach
• react-native-fs

然後，一旦你以base64格式有你的形象，你可以做如下：

var photo = { 
    data: myBase64Data, 
    type: 'image/jpeg', 
    name: 'photo.jpg', 
}; 

var body = new FormData(); 
body.append('authToken', 'secret'); 
body.append('photo', JSON.stringify(photo)); 
body.append('title', 'A beautiful photo!'); 

xhr.open('POST', serverURL); 
xhr.send(body); 

希望有所幫助。