Невозможно загрузить файл на сервер, используя Node.js и React Native. - PullRequest
Новая
       11

Невозможно загрузить файл на сервер, используя Node.js и React Native.

0 голосов
/ 23 февраля 2019

Мы сталкиваемся с очень странным поведением в нашем приложении.

У нас есть сервер Node.js, работающий на Heroku.Наш клиент - это собственное приложение React, которое пытается отправить файл на наш сервер.

Код переднего плана: 

import ImagePicker from "react-native-image-picker";

class MyComponent extends React.Component {

...    

handleGallery = () => {
  ImagePicker.showImagePicker(pickerOptions, response => {

  const { uri, type, fileName } = response;
  const data = new FormData();

  data.append("data", { uri, type, name: `photo.${fileName}` });

  this.submitMultpart(data)
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    });
   }
  });
 };

 submitMultpart = formData => {
  return new Promise((resolve, reject) => {
  const URL = "https://example.com/api/upload";

  const options = {
    method: "POST",
    body: formData,
    headers: {
      Accept: "application/json",
      "Content-Type": "multipart/form-data; boundary=6ff46e0b6b5148d984f148b6542e5a5d",
    }
  };

  fetch(URL, options)
    .then(res => {
      console.log(res);
      resolve(res);
    })
   .catch(err => {
      console.log(JSON.stringify(err));
      reject(err);
   });
 });
};
}

Код внутреннего конца: 

const multiparty = require("multiparty");

app.post("/api/upload", async (req, res) => {
  const form = new multiparty.Form();

  form.parse(req, async (error, _fields, files) => {
    if (error) {
      console.error(error);
      return res.status(500).json({ success: false });
    }

    // Do some stuff here


    return res.status(200).json({ success: true });
  });
});

Ошибка, которую я получаю в консоли node.js, такова: 

{
  BadRequestError: stream ended unexpectedly
  at Form.<anonymous>(/app/node_modules / multiparty / index.js: 759: 24)
  at Form.emit(events.js: 194: 15)
  at finishMaybe(_stream_writable.js: 641: 14)
  at endWritable(_stream_writable.js: 649: 3)
  at Form.Writable.end(_stream_writable.js: 589: 5)
  at IncomingMessage.onend(_stream_readable.js: 629: 10)
  at Object.onceWrapper(events.js: 277: 13)
  at IncomingMessage.emit(events.js: 194: 15)
  at endReadableNT(_stream_readable.js: 1103: 12)
  at process._tickCallback(internal / process / next_tick.js: 63: 19) message: 'stream ended unexpectedly'
}

ps: заголовки правильно установлены в API FETCH.Мы получаем их на сервере.

p.s2: Используя почтальон, я могу отправлять файлы на свой сервер (используя те же заголовки, которые я использовал в API FETCH.Запрос успешно обработан в серверной части, и я получаю файл)

p.s3: Файл, который я пытаюсь отправить, очень маленький, поэтому кажется, что размер файла непроблема здесь.

p.s4: я использую случайную границу в заголовках запроса, потому что без этого я получаю эту ошибку: 

{ 
  BadRequestError: content-type missing boundary
  at Form.parse (/app/node_modules/multiparty/index.js:180:21)
  at app.post (/app/routes/api/personalDocumentRoute.js:12:10)
  at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
  at next (/app/node_modules/express/lib/router/route.js:137:13)
  at admin.auth.verifyIdToken.then.firebaseUser (/app/middlewares/requireFirebaseLogin.js:26:14)
  at process._tickCallback (internal/process/next_tick.js:68:7) message: 'content-type missing boundary' 
}

Дополнительная информация:

package.json: 

"react": "16.6.3",
"react-native": "0.58.3",

Любая помощь будет потрясающей.Много часов отладки безуспешно: /

...