Javascript 将文件从mobile发送到Node js服务器_Javascript_Android_Node.js_Mobile_React Native

Javascript 将文件从mobile发送到Node js服务器

javascript android node.js mobile react-native

Javascript 将文件从mobile发送到Node js服务器,javascript,android,node.js,mobile,react-native,Javascript,Android,Node.js,Mobile,React Native,我正在用react native做一个应用程序。现在我正试图将一个图像从手机发送到服务器（NodeJS）。为此，我使用react原生图像选择器。问题是，当我发送图像时，它会保存一个文件，但它是空的，不包含照片。我认为问题可能是服务器无法访问映像的路径，因为它位于不同的设备中。但我不知道我该怎么做反应本机： openImagePicker(){ const options = { title: 'Select Avatar', storageOpti

我正在用react native做一个应用程序。现在我正试图将一个图像从手机发送到服务器（NodeJS）。为此，我使用react原生图像选择器。问题是，当我发送图像时，它会保存一个文件，但它是空的，不包含照片。我认为问题可能是服务器无法访问映像的路径，因为它位于不同的设备中。但我不知道我该怎么做

反应本机：

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);
        });

  });
});
});
};

创建一个对象，然后将该对象发送到服务器。对象将由名称、路径和类型组成，如下所示：

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

以上是发送图像数据的一种方式。另一种方法是将其转换为BLOB，这样服务器端程序员就不必执行此任务。您可以使用

react native fetch BLOB

生成BLOB

另一种方法是直接将图像上传到amazon服务器（s3）并将链接发送到后端

返回base64字符串的函数：

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)
 });
},

干杯：）

制作一个对象，然后将该对象发送到服务器。对象将由名称、路径和类型组成，如下所示：

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

以上是发送图像数据的一种方式。另一种方法是将其转换为BLOB，这样服务器端程序员就不必执行此任务。您可以使用

react native fetch BLOB

生成BLOB

另一种方法是直接将图像上传到amazon服务器（s3）并将链接发送到后端

返回base64字符串的函数：

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)
 });
},

干杯：）

是的，问题是文件路径在本地设备上，而不是服务器上。您希望发送react本机映像选择器返回给您的实际数据，而不是uri。看起来该库使用base64对数据进行编码，因此您希望将其发送到服务器，而不是从库返回的uri，因为它在远程服务器上不可访问

这意味着您不会读取服务器上的任何文件，而只是解码响应体中的base64字符串并将其写入文件系统

对于客户端：

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)=>{...})

祝你好运：）