Question

我对编码还很陌生，并且我正在学习React Native和Laravel。我当时正在做一个练习项目，我需要将图像从我的React Native应用程序上传到Laravel服务器，然后从服务器上将其保存到云或其他东西上。我可以使用expo-image-picker上传并在应用程序上显示图像，但似乎无法使用formData将其发布到服务器上。

还有，为什么当我console.log formData时为什么显示一个空对象？

我用于加载图像并上传图像的代码：

pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  allowsEditing: true,
  aspect: [4, 3],
  quality: 1,
});

console.log(result);
if(!result.cancelled)
{
  this.setState({
    image : result.uri
  })
}



// ImagePicker saves the taken photo to disk and returns a local URI to it
  let localUri = result.uri;
  //console.log("localUri:", localUri)
  let filename = localUri.split('/').pop();
  console.log("filename:", filename)

  // extract the filetype
  //let fileType = localUri.substring(localUri.lastIndexOf(".") + 1);
  //console.log(fileType)
  let fileType = localUri.substring(localUri.lastIndexOf(":") + 1,localUri.lastIndexOf(";")).split("/").pop();
  console.log("type:", fileType)

  let formData = new FormData();

  formData.append("photo", {
    uri : localUri,
    name: `photo.${fileType}`,
    type: `image/${fileType}`
  });

  console.log("formdata", formData)

  let options = {
    method: "POST",
    body: formData,
    headers: {
      Accept: "application/json",
      "Content-Type": "multipart/form-data"
    }
  };

  let response = await fetch(`${this.props.url}imagetest`, options)
  result = await response.json()
  console.log(result)

我在Laravel中api.php的简单代码是：

Route::post("/imagetest", function (Request $request) {


return ["uploaded" => $request->hasFile("photo")];
});

Answer 1

在以下位置找到了解决方案

send image using Expo

我遇到的问题是，我通过在网络上运行代码来测试它，当我在设备上运行它时，我可以看到formdata以及图像也已上传

Expo React Native将图像上传到后端的Laravel

1 个答案: