问题描述

我在通过 fetch 和 react-native-image-picker 将图像上传到 multer 和 express js 后端时遇到了很大的麻烦.

I am having great trouble in uploading an image via fetch and react-native-image-picker to multer and express js backend.

下面是我的 react 原生代码.

Below is my react native code.

try {

 const data = new FormData();

  data.append('image', {
    name: photo.fileName,
    type: photo.type,
    uri:
      Platform.OS === 'android' ? photo.uri : photo.uri.replace('file://', ''),
  });

 data.append('id', id)

    fetch(`${API}save-image`, {
      method: 'POST',

      body: data,
    })
      .then(response => response.json())
      .then(response => {
        console.log('upload succes', response);
      })
      .catch(error => {
        console.log('upload error', error);
      });
  } catch (error) {
    console.log(error);
    if (error.response !== undefined) {
      message = error.response.data.message;
    } else {
      message = error;
    }

    return Promise.reject(message);
  }

image 变量是我们从 react-native-image-picker 库中获得的响应对象，其中包含图像数据和 uri 以及其他需要的项目.

image variable is the response object we get from a react-native-image-picker library that contains image data and uri with other needed items.

在后端我尝试登录 multer 配置的 req.files 对象.

in the backend i am trying to log in the req.files object that is configured by multer.

const Storage = multer.diskStorage({
    destination(req, file, callback) {
        callback(null, path.join(__dirname, '../uploads/'));
    },
    filename(req, file, callback) {
        callback(null, new Date().toISOString() + '_' + file.originalname);
    },
});

const upload = multer({
    storage: Storage,
    limits: { fieldSize: 25 * 1024 * 1024 },
});
router.post(
    '/save-image',
    upload.array('image', 3),
    controller.saveImage
);

在控制器中我将只是 console.log(req.files) 然后返回成功消息.

in the controller i will just console.log(req.files) and then return success message.

我可以在 android 模拟器上看到控制台日志，但在 iOS 模拟器上看不到.

I am able to see the console log in case of android emulator but not on iOS emulator.

事实上，看起来图像并没有被发送到后端.但是后端没有错误，iOS没有记录.

In fact the image it seems is not being send to the backend. But there is no error on the backend side and it is not logged in case of iOS.

真的很郁闷

有人可以帮忙吗?

推荐答案

下面的 react-native 和 Flipper 版本有问题 0.39 导致带有文件上传的网络请求失败，请尝试手动更新您的 Flipper 版本.在您的 podfile 中:

There was an issue with react-native and flipper version below 0.39 that caused network requests with file upload to fail, try to manually update your flipper version. In your podfile:

versions['Flipper'] ||= '~> 0.51.0'

这篇关于multer，反应原生图像选择器图像上传在 iOS 上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！