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

宗政洋

2023-12-01

如今，开发人员同时处理前端和后端项目是很常见的。根据最近的一项开发人员调查，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 = $request->file('image');
        $filename = uniqid() 。“_”。$file->getClientOriginalName();
        $file->move(public_path('public/images'), $filename);
        $url = URL::to('/') 。'/公共/图像/' 。$文件名；
        $image['url'] = $url;
        $图像->保存（）；
        return response()->json(['isSuccess' => true, 'url' => $url]);
    }
}

在该uploadImage方法中，我们使用Validator实用程序类来验证请求中有图像并且文件大小小于 2MB。如果验证失败，我们会返回验证错误消息作为响应。

在上面的代码中，我们将图像存储在公共路径中，以便 URL 可以访问它。要使文件名唯一，您可以使用该uniqid()函数在原始文件名前面加上唯一 ID。

为图像上传创建端点

接下来，通过将以下代码片段添加到routes/api.php文件中，将控制器方法附加到 API 端点：

使用 App\Http\Controllers\ImageUploadController；

Route::post('/upload', [ImageUploadController::class, 'uploadImage'])
    ->name('images.upload');

现在，使用以下命令在您的系统上运行 API 服务器：

> php 工匠服务 --host 0.0.0.0

要从本地 IP 地址启用 API 访问，请使用该--host 0.0.0.0选项。你需要这个，因为 React Native 应用程序会向本地 IP 地址发出 HTTP 请求。

要在 Windows 上查找本地 IP 地址，请运行以下命令：

> 配置

要在 macOS 上查找本地 IP 地址，请检查网络设置。或者，您可以使用ngrok通过 URL 使您的 localhost 公开访问。

来自 LogRocket 的更多精彩文章：

不要错过来自 LogRocket 的精选时事通讯The Replay
使用 React 的 useEffect优化应用程序的性能
在多个 Node 版本之间切换
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri，一个用于构建二进制文件的新框架
比较NestJS 与 Express.js
发现TypeScript 领域中使用的流行 ORM

使用 Expo 配置 React Native 应用程序

在本指南中，我们将使用Expo创建 React Native 项目。Expo 是一种开发工具，可让您在任何设备上运行您的 React Native 应用程序，而无需使用模拟器。

> npx create-expo-app ImageUploaderApp

接下来，让我们安装一些我们将在项目中使用的依赖项。我们将使用该expo-image-picker库从设备的图库中选择图像，并使用该axios库将照片上传到我们的 Laravel API。

要安装这些库，请打开一个终端并导航到您的项目目录。然后，运行以下命令：

> npm i expo-image-picker axios

现在已经安装了这些依赖项，我们可以开始处理我们的代码了！

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

让我们为 React Native 应用程序创建 UI。

首先创建一个自定义Button组件，如下所示：

从“反应”导入反应；
从“react-native”导入 { TouchableOpacity, Text, StyleSheet };

接口 ButtonProps {
  onPress: () => 无效；
  文本：字符串；
}

export const Button = ({ onPress, text }: ButtonProps) => (
  <TouchableOpacity onPress={onPress} style={styles.button}>
    <文本样式={styles.buttonText}>{文本}</Text>
  </TouchableOpacity>
);

常量样式 = StyleSheet.create({
  按钮： {
    背景颜色：“蓝色”，
    填充：20，
    边界半径：5，
  },
  按钮文本：{
    字体大小：20，
    颜色：“#fff”，
  },
});

接下来，创建一个Thumbnail组件来预览从图库中选择的图像。

从“反应”导入反应；
从“react-native”导入{视图、图像、样式表}；

界面缩略图道具 {
  uri：字符串；
}

导出 const Thumbnail = ({ uri }: ThumbnailProps) => (
  <查看>
    <图片来源={{ uri }} style={styles.thumbnail} />
  </查看>
);

常量样式 = StyleSheet.create({
  缩略图：{
    宽度：300，
    身高：300，
    resizeMode：“包含”，
    边距底部：50，
  },
});

我们可以在主App.js文件中一起使用这些组件来创建应用程序的用户界面。

openImagePickerAsync()接下来，在文件中创建一个函数App.js来检查并请求画廊权限。当用户授予权限时，将选中的图像设置为状态，并使用Thumbnail组件显示图像。

从“expo-image-picker”导入 * 作为 ImagePicker；
导入反应，{ useState } 从“反应”；
从“./components/Button”导入{按钮}；
从“./components/Thumbnail”导入{缩略图}；
从“展览状态栏”导入{状态栏}；
从“react-native”导入 { StyleSheet, View, Platform };

...

导出默认函数 App() {

  const [selectedImage, setSelectedImage] = useState<ImagePicker.ImageInfo>();

  常量 openImagePickerAsync = async () => {
    让权限结果 =
      等待 ImagePicker.requestMediaLibraryPermissionsAsync();
    if (permissionResult.granted === false) {
      alert("需要访问相机胶卷的权限！");
      返回;
    }
    让 pickerResult = 等待 ImagePicker.launchImageLibraryAsync({
      质量：1，
      媒体类型：ImagePicker.MediaTypeOptions.Images，
    });
    if (pickerResult.cancelled === true) 返回；
    setSelectedImage(pickerResult);
  };

  const uploadImage = async () => {
    // 上传逻辑到这里
  }

  返回 （
    <查看样式={styles.container}>
      {选择图像？(
        <>
          <缩略图 uri={selectedImage.uri} />
          <Button onPress={uploadImage} text="上传" />
        </>
      ) : (
        <Button onPress={openImagePickerAsync} text="选择一张照片" />
      )}
      <StatusBar style="auto" />
    </查看>
  );
}

此时，应用程序的 UI 应如下所示：

从图库中选择图像后，我们希望显示一个上传按钮，该按钮将向 Laravel 服务器发出 API 请求。

在uploadImage()函数中，创建一个FormData对象并附加图像数据。调用该axios.post()方法向上传端点发出 POST 请求。在中headers，添加Content-Type: multipart/form-data启用文件上传到服务器。

const API_BASE = '你的本地 IP 地址' // 192.168.1.1;

const uploadImage = async () => {
    如果（！selectedImage）返回；
    常量 canUpload = 等待 checkFileSize(selectedImage.uri);
    如果（！canUpload）{
      alert("不能上传大于 2MB 的文件");
      setSelectedImage(未定义);
      返回;
    }
    常量 uri =
      Platform.OS === "安卓"
        ? selectedImage.uri
        : selectedImage.uri.replace("file://", "");
    常量文件名 = selectedImage.uri.split("/").pop();
    const match = /\.(\w+)$/.exec(文件名作为字符串);
    const ext = match?.[1];
    常量类型 = 匹配？`image/${match[1]}` : `image`;
    常量 formData = new FormData();
    formData.append("图片", {
      乌里，
      名称：`image.${ext}`,
      类型，
    } 作为任何）；
    尝试 {
      const { 数据 } = 等待 axios.post(`${API_BASE}/api/upload`, formData, {
        标头：{“内容类型”：“多部分/表单数据”}，
      });
      如果（！data.isSuccess）{
        alert("图片上传失败！");
        返回;
      }
      alert("图片上传");
    } 捕捉（错误）{
      控制台日志（错误）；
      alert("出了点问题");
    } 最后 {
      setSelectedImage(未定义);
    }
};

这是带有上传按钮的示例应用程序：

聚优影视TV双播盒子，内置多个资源接口，开源TVBOX制作！

检查图像文件大小

在将文件上传到服务器之前检查文件大小是一种很好的做法。让我们通过安装expo-file-system库来做到这一点。

> npm i 展览文件系统
从“expo-file-system”导入*作为文件系统；
...

常量 checkFileSize = async (
  文件URI：字符串，
  最大尺寸 = 2
): 承诺<boolean> => {
  const fileInfo = 等待 FileSystem.getInfoAsync(fileURI);
  如果（！fileInfo.size）返回false；
  常量 sizeInMb = fileInfo.size / 1024 / 1024;
  返回 sizeInMb < 最大尺寸；
};

在上面的代码中，该FileSystem.getInfoAsync()方法接受文件 URI 作为参数，并以字节为单位返回文件大小。

现在，运行npm run start命令来构建 React Native 应用程序。

> npm 运行开始

你需要在你的设备上安装 Expo 应用程序来安装和运行你的 React Native 应用程序。安装完成后，扫描终端上显示的二维码。您可以从官方文档中了解更多关于 Expo 的信息。

一旦您的应用在设备上运行，请尝试上传大于 2MB 的图像。您应该会看到如下所示的错误消息：

现在，尝试上传较小的图像；您应该会看到一条消息，指示图像已成功上传。

结论

在本文中，我们演示了如何将图像从 React Native 应用程序上传到 Laravel API。

我们首先设置我们的 Laravel API 并创建一个用于图像上传的端点。然后，我们使用 Expo 配置了 React Native 项目，并创建了用于预览和上传图像的 UI 组件。最后，我们使用 Axios 将图片上传到 Laravel API。

将图像从 React Native 上传到 Laravel API 是一个非常简单的过程。只需按照本文中概述的步骤操作，您应该可以立即完成它。如果您有任何疑问或遇到任何问题，请随时在下面发表评论。

干杯和快乐的编码！

LogRocket：立即在您的 React Native 应用程序中重新创建问题。

LogRocket是一种 React Native 监控解决方案，可帮助您立即重现问题、优先处理错误并了解 React Native 应用程序的性能。

LogRocket 还可以通过准确地向您展示用户如何与您的应用程序交互来帮助您提高转化率和产品使用率。LogRocket 的产品分析功能揭示了用户未完成特定流程或未采用新功能的原因。

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

内容

入门

设置 Laravel 图片上传 API

为图像上传创建端点

来自 LogRocket 的更多精彩文章：

使用 Expo 配置 React Native 应用程序

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

聚优影视TV双播盒子，内置多个资源接口，开源TVBOX制作！

检查图像文件大小

结论

LogRocket：立即在您的 React Native 应用程序中重新创建问题。

相关阅读

相关文章

相关问答

相关文档