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 并将该图像对象附加到其中并将该表单数据发送到服务器。

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

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

从 React Native 上传图片到 Laravel 服务器

2 个答案: