2

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

下面是我的反应原生代码。

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 以及其他需要的项目。

在后端，我试图登录由 multer 配置的 req.files 对象。

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)然后返回成功消息。

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

事实上，看起来图像并没有被发送到后端。但是后端没有错误，并且在 iOS 的情况下没有记录。

真是令人沮丧

有人可以帮忙吗？

4

1 回答 1

1

react-native 和下面的 Flipper 版本存在问题0.39，导致文件上传的网络请求失败，请尝试手动更新您的 Flipper 版本。在你的podfile：

versions['Flipper'] ||= '~> 0.51.0'
于 2020-08-04T16:07:56.150 回答