如何将图像从 React Native 上传到 Laravel API

如今，开发人员同时处理前端和后端项目是很常见的。根据最近的一项开发人员调查，React Native 是全球最流行的用于构建跨平台移动应用程序的框架之一。Laravel 是一个 PHP Web 框架，具有优雅的代码结构，开发人员可以使用它来创建 REST API。Laravel 目前有71k 的 GitHub 星数，证明了它在开发者社区中的受欢迎程度。

本文将介绍从 React Native 应用程序上传图像到 Laravel API 的详细信息。

内容

• 入门

• 设置 Laravel 图片上传 API

• 为图像上传创建端点

• 使用 Expo 配置 React Native 应用程序

• 构建用于预览和上传图像的 React Native UI

• 检查图像文件大小

入门

从 React Native 应用上传图片看起来很简单。然而，React Native 并没有提供直接的方式来连接应用程序和Laravel 的端点。

因此，您需要采取一些步骤并使用 Axios 之类的 HTTP 库从您的应用中上传图像。您还需要将每个图像的公共 URL 存储在数据库中。

让我们从使用composer创建 Laravel 项目开始。

> 作曲家创建项目 laravel/laravel 图像上传

运行以下命令以创建Image模型类以及迁移。

> php 工匠制作：模型图像 -m

up()然后，在生成的迁移类的函数中指定所需的列，如下所示：

公共函数 up()
{
    Schema::create('images', function (Blueprint $table) {
        $table->id();
        $table->string('url');
        $table->timestamps();
    });
}

接下来，运行以下命令来执行数据库更改。

> php 工匠迁移

现在数据库已经准备好了，让我们设置 API 代码。

设置 Laravel 图片上传 API

让我们创建一个 POST API 来处理来自 React Native 应用程序的图像上传请求。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

运行以下命令来创建一个控制器来处理传入的请求。

php 工匠制作：控制器 ImageUploadController

接下来，在ImageUploadController类中，创建一个处理程序类方法，uploadImage如下所示。

使用应用\模型\图像；
使用 Illuminate\Http\Request；
使用 Illuminate\Support\Facades\URL；
使用 Illuminate\Support\Facades\Validator；
使用 Illuminate\Validation\Rules\File；
​
类 ImageUploadController 扩展控制器
{
    公共函数uploadImage(请求$request)
    {
        $validator = Validator::make($request->all(), ['image' => ['required', File::image()->max(2 * 1024)]]);
        if ($validator->fails()) return response()->json($validator->messages());
        $图像 = 新图像（）；
        $file