multer,做出反应,在iOS上无法运行本机图像选择器图像上传

时间:2020-03-19 07:37:02

标签: android ios fetch multer react-native-image-picker

我在通过提取和react-native-image-picker来上传图像以支持multer和表达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中也不会记录。

这真令人沮丧

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

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

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