2016-08-01 13 views
4

私はヘッダーと本文を設定しています。サーバーで画像をアップロードするにはポストでフェッチを使用しています。レスポンスコード200が表示されますが、画像はアップロードされません。ここでReactNativeを使用してサーバー上の画像をアップロードする方法

は、本体のコードです:

export default function setRequestBody(imagePath){ 

    let boundry = "----WebKitFormBoundaryIOASRrUAgzuadr8l"; 

    let body = new FormData(); 

    body.append("--"+boundry+"\r\n"); 
    body.append("Content-Disposition: form-data; name=imageCaption\r\n\r\n"); 
    body.append("Caption"+"\r\n"); 
    body.append("--"+boundry+"\r\n"); 
    body.append("Content-Disposition: form-data; name=imageFormKey; filename =iimageName.pngg \r\n"); 
    body.append("Content-Type: image/png \r\n\r\n"); 
    body.append({uri : imagePath}); 
    // appened image Data Here 
    body.append("\r\n"); 
    body.append("--"+boundry+"--\r\n"); 
    return body 

} 

してください、私が作っていhelp.What間違い。あなたはライブラリを使用する必要がありますので、ネイティブJSCは、ファイルおよびBLOBをサポートしていません反応する。

react-native-fetch-blobは、このために非常に良いサポートを持っているので:(

答えて

5
から例 body.append({uri : imagePath});です

私は解決策を見つけた:

let body = new FormData(); 
body.append('photo', {uri: imagePath,name: 'photo.png',filename :'imageName.png',type: 'image/png'}); 
    body.append('Content-Type', 'image/png'); 

fetch(Url,{ method: 'POST',headers:{ 
    "Content-Type": "multipart/form-data", 
    "otherHeader": "foo", 
    } , body :body}) 
    .then((res) => checkStatus(res)) 
    .then((res) => res.json()) 
    .then((res) => { console.log("response" +JSON.stringify(res)); }) 
    .catch((e) => console.log(e)) 
    .done() 

**ファイル名は任意です...

3

問題は、そのREADME.md

RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', { 
     Authorization : "Bearer access-token", 
     otherHeader : "foo", 
     'Content-Type' : 'multipart/form-data', 
    }, [ 
    // element with property `filename` will be transformed into `file` in form data 
    { name : 'avatar', filename : 'avatar.png', data: binaryDataInBase64}, 
    // custom content type 
    { name : 'avatar-png', filename : 'avatar-png.png', type:'image/png', data: binaryDataInBase64}, 
    // part file from storage 
    { name : 'avatar-foo', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(path_to_a_file)}, 
    // elements without property `filename` will be sent as plain text 
    { name : 'name', data : 'user'}, 
    { name : 'info', data : JSON.stringify({ 
     mail : '[email protected]', 
     tel : '12345678' 
    })}, 
    ]).then((resp) => { 
    // ... 
    }).catch((err) => { 
    // ... 
    }) 
+0

未定義(RNFetchBlob.DocumentDirを評価する) –

+0

これはネイティブモジュールであるため、ネイティブライブラリをリンクしてプロジェクトを再コンパイルする必要があります。 – Xeijp

関連する問題