从 react native 上传图片到 laravel 服务器

Question

我应该如何在 react native 中使用 fetch 方法将我的图片上传到 laravel 服务器？ 我在我的反应原生项目中使用react-native-image-picker 并遵循该包https://aboutreact.com/example-of-image-picker-in-react-native/ 我的回答是这样的

base64 ->  undefined
 LOG  uri ->  file:///data/user/0/proj_name/cache/rn_image_picker_lib_temp_e100eb14-7efc-4aee-aea9-dc9d05a61b51.jpg
 LOG  width ->  300
 LOG  height ->  400
 LOG  fileSize ->  13813
 LOG  type ->  image/jpeg
 LOG  fileName ->  rn_image_picker_lib_temp_e100eb14-7efc-4aee-aea9-dc9d05a61b51.jpg 

我应该如何使用 fetch 方法将该图片上传到我的 laravel 后端

Answer 1

如果您的图像表单字段名称是“image”并且您在存储中有一个名为“images”的文件夹，您可以在后端使用此示例代码。您的 jpeg 图像将保存在此目录中。

    $imageData = $request->image;  // Your base64 encoded
    $fileName = str_random(10) . '.jpg';

    $imageData = str_replace('data:image/jpeg;base64,', '', $imageData);
    $imageData = str_replace(' ', '+', $imageData);

    \File::put(storage_path(). '/images/' . $fileName, base64_decode($imageData));

Answer 2

有一种更好的方法将文件转换为 FormData 格式。 您已经获得了 uri、类型和文件名，所以只需将其存储在一个对象中，如下所示。您也可以对该图像名称进行硬核。

image: {
     name: IMage Name,
     type: ImageType,
     uri: imagePath
},

在通过 API 发送到数据库之前，只需像这样创建 FormData 并将该 Image 对象附加到其中并将该 formdata 发送到服务器。

const formData = new FormData();
formData.append('profile_pic', state.image);

现在您可以将此 formData 发送到后端。