モバイルからノードjsサーバーにファイルを送信

Question

私は反応ネイティブでアプリケーションをやっています。今では、モバイルからサーバーに画像を送信しようとしています（ノードJ）。このため私は反応ネイティブイメージピッカーを使用しています。そして問題は、画像を送信するとファイルを保存するが、写真は含まれていないということです。私は、おそらく問題は、別のデバイスにあるため、サーバーがイメージのパスにアクセスできないということだと思います。しかし、私はそれがどうやってできるのか分かりません。

が反応-ネイティブ：

openImagePicker(){ 
     const options = { 
     title: 'Select Avatar', 
     storageOptions: { 
      skipBackup: true, 
      path: 'images' 
     } 
     } 

     ImagePicker.showImagePicker(options, (imagen) =>{ 
      if (imagen.didCancel) { 
     console.log('User cancelled image picker'); 
     } 
     else if (imagen.error) { 
     console.log('ImagePicker Error: ', imagen.error); 
     } 
     else if (imagen.customButton) { 
     console.log('User tapped custom button: ', imagen.customButton); 
     } 
     else { 
    let formdata = new FormData(); 
    formdata.append("file[name]", imagen.fileName); 
    formdata.append("file[path]", imagen.path); 
    formdata.append("file[type]", imagen.type); 
      fetch('http://X/user/photo/58e137dd5d45090d0b000006', { 
     method: 'PUT', 
     headers: { 
     'Content-Type': 'multipart/form-data' 
     }, 
     body: formdata 
    }) 
     .then(response => { 
      console.log("ok");  
     }) 
     .catch(function(err) { 
      console.log(err); 
     }) 
    }})} 

ノードのJs：

addPhotoUser = function (req, res) { 
User.findById(req.params.id, function(err, user) { 
fs.readFile(req.body.file.path, function (err, data) {  
    var pwd = 'home/ubuntu/.../'; 
    var newPath = pwd + req.body.file.name; 
    fs.writeFile(newPath, data, function (err) { 
    imageUrl: URL + req.body.file.name; 
     user.save(function(err) { 
      if(!err) { 
       console.log('Updated'); 
      } else { 
       console.log('ERROR: ' + err); 
      } 
      res.send(user); 
     }); 

    }); 
}); 
}); 
}; 

Answer 1

オブジェクトは、サーバーにそのオブジェクトを送信してください。オブジェクトは次のように名前、パス、タイプで構成されます。

var imageData = {name: 'image1', path: uri, type: 'image/jpeg'} 

上記は画像データを送信する方法の1つです。もう1つの方法は、BLOBに変換して、サーバー側のプログラマーが最後にこのタスクを実行する必要がないようにすることです。 react-native-fetch-blobを使用してBLOBを作成できます。

var RNFetchBlob = require('react-native-fetch-blob').default; 

getImageAttachment: function(uri_attachment, mimetype_attachment) { 

    return new Promise((RESOLVE, REJECT) => { 

    // Fetch attachment 
    RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment) 
     .then((response) => { 

     let base64Str = response.data; 
     var imageBase64 = 'data:'+mimetype_attachment+';base64,'+base64Str; 
     // Return base64 image 
     RESOLVE(imageBase64) 
    }) 

    }).catch((error) => { 
    // error handling 
    console.log("Error: ", error) 
}); 
}, 

乾杯:)

：

もう一つの方法は、base64文字列を返します

機能..直接アマゾンのサーバー（S3）に画像をアップロードし、バックエンドへのリンクを送信することです

Answer 2

はい、問題はファイルパスがサーバーではなくローカルデバイス上にあることです。 uriではなく、反応したネイティブイメージピッカーによって返された実際のデータを送信したいとします。ライブラリがbase64でデータをエンコードするように見えるので、ライブラリから返されたURIではなく、リモートサーバでアクセスできなくなるため、サーバに送信する必要があります。

これは、サーバー上のファイルを読み取るのではなく、応答本体のbase64ストリングをデコードしてファイルシステムに書き込むことを意味します。クライアント側の場合

：サーバー側atobで

let formdata = new FormData(); 
formdata.append("file[name]", imagen.fileName); 
formdata.append("file[data]", imagen.data); // this is base64 encoded! 
formdata.append("file[type]", imagen.type); 
     fetch('http://X/user/photo/58e137dd5d45090d0b000006', { 
    method: 'PUT', 
    headers: { 
    'Content-Type': 'multipart/form-data' 
    }, 
    body: formdata 
}) 

ファイルシステムに書き込む前にbase64でからデコードする：

let decoded = atob(req.body.data) 
// now this is binary and can written to the filesystem 

そこから：

fs.writeFile(newPath, decoded, function (err) { 
    imageUrl: newPath; 
     user.save(function(err) { 
      if(!err) { 
       console.log('Updated'); 
      } else { 
       console.log('ERROR: ' + err); 
      } 
      res.send(user); 
     }); 

    }); 

注意、あなたはあなたのコードにあるファイルシステムの書き込みを必要としません。あなたの要求にb64文字列として送信されます。

また、そのユーザーオブジェクトをどのように使用しているかに若干の奇妙さがあるようです。実際のデータではなく、エラーを処理する関数を渡すだけのようです。どのORMを使用しているのか分かりませんので、どのように動作するのかは分かりません。多分このような何か？

user.save({imageUrl:uriReturnedByFsWrite}, (err, data)=>{...}) 

幸運:)