时间戳

首页 > 解决方案 > 无法使用 react-native-image-crop-picker 上传从相机捕获的图像

react-native - 无法使用 react-native-image-crop-picker 上传从相机捕获的图像

问题描述

我正在使用 react-native-image-crop-picker 来处理图像，我可以使用相同的代码显示和上传通过相同插件从画廊拍摄的图像..而我可以使用相同的插件显示从相机捕获的图像.. .但无法将它们上传到服务器。

我得到的错误是

Error: Request failed with status code 500
    at createError (C:\Repos\247client\node_modules\axios\lib\core\createError.js:16)
    at settle (C:\Repos\247client\node_modules\axios\lib\core\settle.js:18)
    at XMLHttpRequest.handleLoad (C:\Repos\247client\node_modules\axios\lib\adapters\xhr.js:77)
    at XMLHttpRequest.dispatchEvent (C:\Repos\247client\node_modules\event-target-shim\lib\event-target.js:172)
    at XMLHttpRequest.setReadyState (C:\Repos\247client\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:572)
    at XMLHttpRequest.__didCompleteResponse (C:\Repos\247client\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:394)
    at C:\Repos\247client\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:507
    at RCTDeviceEventEmitter.emit (C:\Repos\247client\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190)
    at MessageQueue.__callFunction (C:\Repos\247client\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:349)
    at C:\Repos\247client\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106

我的图像信息是：

{uri: "file:///storage/emulated/0/Pictures/b9e9acdd-5807-43c8-9c6b-08af4f9e37ce.jpg", width: 3456, height: 4608, mime: "image/jpeg", size: 247313}
height: 4608
mime: "image/jpeg"
size: 247313
uri: "file:///storage/emulated/0/Pictures/b9e9acdd-5807-43c8-9c6b-08af4f9e37ce.jpg"
width: 3456

我对两者使用相同的上传代码，即上传从画廊和相机拍摄的图像。

代码是


export const uploadPrescription = async (
  id,
  address,
  contact_no,
  textPrescription,
  data
) => {
  const formData = new FormData();
  formData.append("user_id", id);
  formData.append("contact_no", contact_no);
  formData.append("medicine_description", textPrescription);
  formData.append("location", address);
  var i = 0;
  data.forEach(photo => {
    formData.append(`prescriptions[${i}]`, data[i]);
    i++;
  });
  console.log(formData);

  return (await makeRequest(urls.uploadByPrescription, "POST", formData)).data;

};

export const makeRequest = async (url, method, data) => {
  console.log("i am here");
  const headers = await getHeaders();
  console.log(headers);
  let response = await axios({
    method,
    url,
    data,
    headers: headers,
    timeout: url.includes("register") ? 30000 : 10000
  });
  console.log(response);
  var data = await response;
  return data;
};

标签： react-native

解决方案

请参考https://stackoverflow.com/a/62087375/6508545中给出的答案

我曾使用react-native-image-crop- picker npm 包从相机胶卷和照片库中获取图像。然后将其上传到AWS S3 Server。

我可以从 IOS 设备轻松上传，但不能从 Android 设备上传。

问题是在 android 和 IOS 设备中获取的图像的 URI 或文件路径不同。

示例 filePath 变量数据

  1. IOS设备 -

“/Users/Niveditha/Library/Developer/CoreSimulator/Devices/B41EB910-F22B-4236-8286-E6BA3EA75C70/data/Containers/Data/Application/B88777C6-6B10-4095-AB67-BB11E045C1DE/tmp/react-native-image-裁剪选择器/img.jpg"

  1. 安卓设备 -

“ file: ///storage/emulated/0/Android/data/com.uploadcameraroll/files/Pictures/img.jpg”

推荐阅读