Загрузить изображение из React Native на сервер Apollo не работает? - PullRequest
Новая
       87

Загрузить изображение из React Native на сервер Apollo не работает?

0 голосов
/ 21 июня 2020

Я создал свой бэкэнд с Nodejs и Apollo Server. Я пытаюсь загрузить изображение из своего React Native клиента. Вот мой внутренний код 

Mutation: {
    async singleUpload(_, { fileInput: { file, fileName } }) {
      try {
        const { createReadStream, filename, mimetype } = await file;
        const stream = createReadStream();
        const path = `./upload/${filename}`;

        const tempFile = { id: 123, filename, mimetype, path };
        await new Promise((resolve, reject) => {
          const writeStream = createWriteStream(path);

          // When the upload is fully written, resolve the promise.
          writeStream.on("finish", resolve);

          // If there's an error writing the file, remove the partially written file
          // and reject the promise.
          writeStream.on("error", (error) => {
            unlink(path, () => {
              reject(error);
            });
          });

          // In node <= 13, errors are not automatically propagated between piped
          // streams. If there is an error receiving the upload, destroy the write
          // stream with the corresponding error.
          stream.on("error", (error) => writeStream.destroy(error));

          // Pipe the upload into the write stream.
          stream.pipe(writeStream);
        });
        ...then upload it to Firebase Storage

Когда я использую Altair плагин для Firefox браузера для загрузки изображения, он работает нормально.

Теперь для моего React Native клиента я используя apollo-upload-client lib. После того, как пользователь выбирает изображение с помощью плагина Image Picker для React Native, я создаю файл 

 const file = new ReactNativeFile({
            uri: image.uri,
            type: image.type,
            name: 'Hi there',
          });

ReactNativeFile из apollo-upload-client lib. Теперь, когда я загружаю его, я получаю сообщение об ошибке в моем бэкэнде: TypeError: createReadStream is not a function, что я понимаю, поскольку в моем ReactNativeFile

нет параметра createReadStream, поэтому я решил изменить свой бэкэнд-код на что-то вроде этот модуль 

const { name, type } = await file;
        console.log("Mime" + type);
        const stream = fs.createReadStream(name);

fs от nodejs Теперь, когда я пытаюсь загрузить изображение из Altair или из React Native, я получаю сообщение об ошибке: 

[Error: ENOENT: no such file or directory,

Из-за моего отсутствия знаний о серверной части я не уверен, что вызывает проблему. Думаю, если я попытаюсь загрузить его из ReactJS вместо React Native, мой код может работать для бэкэнда. Но средство выбора изображений для браузера и родного мобильного телефона сильно отличается, и я пока не пробовал использовать ReactJS

Я следую этой статье https://moonhighway.com/how-the-upload-scalar-works для моего внутреннего кода

...