如何将文件上传到 Back4app

在开发涉及用户上传文件的网络应用程序时，有效的文件管理至关重要。

Back4app 提供基于 Parse 的简单高效的文件存储、管理和检索解决方案机制。

在本指南中，您将学习如何通过将其文件存储功能与 React 应用程序集成来使用 Back4app 存储文件。

Back4app 上的文件存储工作原理

Back4app 使用Parse.File类管理文件上传和存储。

Parse.File类允许你存储Parse.Object无法存储的大文件，如图像、视频、文档和其他二进制数据。

要将文件上传到 Back4app 的云存储空间，您必须创建一个包含文件数据的Parse.File实例并保存该实例。一个新的Parse.File实例需要一个文件名、文件和内容/文件类型（可选）。

必须确保文件名包含文件扩展名，以帮助 Parse 进行相应处理。

不过，您的文件名不必是唯一的，因为每次上传都有一个唯一的标识符，所以上传多个名为example.jpeg 的文件不会造成命名冲突。

上传文件时，Parse.File会根据文件名中的文件扩展名自动检测文件类型。不过，你可以通过指定Content-Type参数来覆盖自动检测。

要在 Back4app 上访问上传的文件，您需要在上传文件后将其与数据对象关联。

然后，你就可以查询关联的数据对象来检索文件。已上传但未与数据对象关联的文件会成为 “孤儿文件”，你将无法访问它们。

现在您已了解 Back4app 上的文件存储工作原理，您将使用 React 创建一个图库应用程序，演示如何从 Back4app 存储和检索文件。

创建 React 应用程序

要使用 React 实现 Back4app 的文件存储功能，首先需要创建一个 React 应用程序与 Back4app 集成。为此，您需要使用 Vite（一种用于快速构建网络应用程序的前端工具）。

在终端运行以下命令，即可使用 Vite 创建 React 应用程序：

npm init vite

运行上述命令后，Vite 会要求你提供项目名称，然后给出一个选项列表，供你选择用于构建网络应用程序的框架。

Vite CLI

如上图所示，项目名称为 gallery-app。选择 React 选项后，您将选择编程语言来开发 React 应用程序。

Vite CLI

对于该项目，请选择 JavaScript 选项。现在，您的项目已经准备就绪。

接下来，您需要在项目中安装一些所需的依赖项。要安装依赖项，请切换到项目目录并运行以下命令：

# Switch to the project directory
cd gallery-app

# Install dependencies
npm install

该命令将在项目中安装所有必要的依赖项，现在就可以在集成开发环境上开始构建应用程序了。

构建 React 应用程序

用集成开发环境打开 React 项目，在src目录中创建一个组件文件夹。在组件文件夹中添加FileUpload组件。

在FileUpload组件中，添加以下代码行：

//FileUpload.jsx
import React from "react";

function FileUpload({updateData}) {
  const [file, setFile] = React.useState("");

  const handleFIleUpload = (event) => {
    setFile(event.target.files[0]);
  };

  return (
    <form>
      <label htmlFor="file-upload" className="custom-file-upload">
        Choose File
      </label>
      <input
        id="file-upload"
        type="file"
        style={{ display: "none" }}
        onChange={handleFileUpload}
      />
    </form>
  );
}

export default FileUpload;

上面的代码块表示一个FileUpload组件，它允许您选择一个本地文件。它包含一个文件状态。它利用文件类型的输入元素来访问和选择设备中的本地文件。

在代码块中，有一个handleFileSelect函数。该函数使用setFile方法用用户选择的第一个文件更新文件状态。

现在，在应用程序组件中修改代码，添加下面代码块中的代码行：

//App.jsx
import FileUpload from "./components/FileUpload";

function App() {
  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>
      <>
        <FileUpload />
      </>
    </main>
  );
}

export default App;

上面的代码块导入了FileUpload组件，并在主元素中进行了渲染。该组件还包含一个h1元素，用于显示文本“我的画廊”。

组件已经准备就绪。接下来，您需要设计应用程序的样式。为此，请替换index.css文件中的代码，并添加以下代码：

/*index.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #F2F2F2;
  color: #333333;
  font-family: "Montserrat", sans-serif;
}

.container{
  inline-size: 60%;
  margin: auto;
}

.title{
  text-align: center;
  margin-block-start: 1rem;
  margin-block-end: 6rem;
}

.custom-file-upload {
  display: inline-block;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
}

.custom-file-upload:hover {
  background-color: #333333;
  color: #FFFFFF;
}

设置 Back4app 应用程序

要设置 Back4app 应用程序，您需要登录您的 Back4app 帐户。如果您没有账户，可以免费创建一个。

登录后，您将使用 Back4app AI 代理创建新应用程序。AI 代理是 Back4app 的一项服务，允许您使用提示进行交互并管理 Back4app 应用程序。

如下图所示，点击账户仪表板导航栏上的人工智能代理链接即可访问。

Back4app 应用程序页面

要使用人工智能代理创建 Back4app 应用程序，请编写一条信息，要求人工智能创建应用程序，类似于下面的提示：

Create a new Back4app application named gallery-app

上述提示将使人工智能创建一个新的 Back4app 应用程序。一旦人工智能创建了应用程序，就会发送一个确认创建的响应以及应用程序的凭据。

就像这样

人工智能代理响应

现在，您的 Back4app 应用程序已准备就绪。复制应用程序 ID 和 JavaScript 密钥凭据，因为您稍后会用到它们。

要访问应用程序，请单击导航栏上的“我的应用程序“链接，访问应用程序仪表板。

现在，您已经使用人工智能代理成功创建了 Back4app 后端，接下来，您需要将 React 应用程序连接到后端。

将 React 应用程序连接到 Back4app

要将 React 应用程序连接到 Back4app，您需要运行以下命令安装 Parse SDK：

npm install parse

接下来，在应用程序组件中导入经过精简的 parse 版本，并将下面的代码块添加到应用程序组件中，使用文章前面保存的凭据对其进行初始化：

//App.jsx

import Parse from 'parse/dist/parse.min.js';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = "<https://parseapi.back4app.com/>";

将"YOUR_APPLICATION_ID "和"YOUR_CLIENT_KEY "替换为从 Back4App 获取的证书。确保安全保存证书，例如使用环境变量。

将文件上传到 Back4app

要在Back4app的云存储中存储文件，首先需要创建一个Parse.File实例。然后，调用保存方法保存 Parse.File实例。

然后，需要将保存的文件与数据对象关联起来，以便能够检索该文件。

为此，请创建一个新的Parse.Object 子类，将文件添加到新子类的属性中，然后保存到 Back4app。

要实现上述逻辑，请修改FileUpload组件中的handleFileUpload函数，使其与下面的代码块相匹配：

//FileUpload.jsx
const handleFileUpload = async (event) => {
    event.preventDefault();
    try {
      let name = "image.jpg";
      const File = new Parse.File(name, event.target.files[0]);
      const photo = await File.save();

      const Gallery = Parse.Object.extend("Gallery");
      const gallery = new Gallery();
      gallery.set("photo", photo);
      await gallery.save();

      console.log("File saved:", File);
      updateData();
    } catch (error) {
      console.error("Error saving file:", error);
    }
  };

handleFileUpload函数负责将照片从本地设备上传到服务器。它会创建一个新的Parse.File实例。

Parse.File方法需要两个参数：代表照片名称的name变量和用户选择的第一个文件。

该函数通过调用文件实例的保存方法，将文件保存到服务器。然后为 Gallery 类创建一个新的 Parse 对象。

使用set方法将照片文件设置为图库对象照片属性的值。最后，该函数使用gallery.save()函数将图库对象保存到服务器。

从 Back4app 获取文件

要从 Back4app 的云存储中获取文件，您需要检索持有该文件的 Parse 对象。为此，您可以创建一个新查询，目标是带有 Parse 对象的类。

要实现上述逻辑，请创建一个Feed组件并添加以下代码块：

//Feed.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";

function Feed({data}) {
  const [gallery, setGallery] = React.useState([]);

  React.useEffect(() => {
    const fetchFiles = async () => {
      let query = new Parse.Query("Gallery");
      const results = await query.find();
      setGallery(results);
    };
    fetchFiles();
  }, [data]);

  return (
    <div className="photos">
      {gallery.map((item) => (
        <img src={item.get("photo").url()} key={item.id} />
      ))}
    </div>
  );
}

export default Feed;

上面的代码块创建了一个图库状态，并为其分配了一个空数组。它使用useEffect钩子运行fetchFiles函数。

useEffect钩子将在组件首次呈现后以及数据道具发生变化时运行该函数。

fetchFiles函数使用Parse.Query方法创建了一个以“图库 “类为目标的新查询。

对查询调用find方法会返回一个包含查询结果的数组。最后，fetchFiles函数使用setGallery函数将结果数组分配给图库状态。

最后，使用map方法为图库数组中的每个项目渲染一个img元素。代码会将img元素的src属性值设置为每个项目照片属性的 URL。

将下面的代码块添加到index.css文件中，为div元素添加照片类样式：

/*index.css*/
.photos{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-block-start: 4rem;
}

要在应用程序中显示Feed组件，请确保在App组件中导入并调用Feed组件。完成所有修改后，您的App组件应如下所示：

//App.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";
import FileUpload from "./components/FileUpload";
import Feed from "./components/Feed";

Parse.initialize(PARSE_APP_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "<https://parseapi.back4app.com/>";

function App() {
  const [data, setData] = React.useState(1);

  const updateData = (prevState) => {
    setData(() => prevState + 1);
  };

  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>

      <>
        <FileUpload updateData={updateData} />
        <Feed data={data} />
      </>
    </main>
  );
}

export default App;

测试应用程序

在应用程序目录下运行下面的代码块，启动应用程序：

npm run dev

运行上述命令将在http://localhost:5173/上启动应用程序。

导航至http://localhost:5173/，你会看到一个类似下图的页面：

画廊应用程序主页

点击“选择文件 “按钮，从本地设备中选择图像。

将图片上传到 Back4app

您可以访问 Back4app 应用程序的控制面板来验证图片是否上传成功。

上传成功后，Back4app 将在"图库 "类表中添加一行，如下图所示。

Back4app 控制面板

或者，您也可以通过查看屏幕上显示的图像进行验证，如下图所示。

画廊应用程序主页

在 Back4app 容器上部署应用程序

在本节中，您将在 Back4app Containers 上部署应用程序。为此，您必须先将应用程序 docker 化，并将其推送到 GitHub 仓库。

您可以使用 Back4app UI 手动执行部署过程，也可以使用 Back4app AI 代理自动执行部署过程。在本教程中，您将使用 AI 代理执行部署流程。

创建 Dockerfile

在应用程序的根目录下创建一个Dockerfile，并在其中添加代码块：

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

接下来，在应用程序的根目录下创建一个.dockerignore文件，并添加下面的代码块：

node_modules

在.dockerignore文件中添加node模块，可确保 Docker 在构建镜像时将node_modules文件夹排除在上下文之外。

请注意，您使用 Vite 创建了 React 应用程序，因此必须配置 Vite 以支持 Docker。要配置 Vite，请用下面的代码块替换vite.config.js中的代码：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

该代码块确保 Vite 仅在指定端口可用时启动服务器，并指定开发服务器将监听 5173 端口的端口号。

接下来，在终端运行下面的命令，构建应用程序的 docker 镜像，确保一切正常：

docker build -t gallery-app .

至此，你已经成功地对应用程序进行了 docker 化，接下来就要部署它了。

部署应用程序

在部署应用程序之前，请将您的 GitHub 账户与Back4app Github 应用程序集成，并授予它访问您要部署的仓库的权限。

导航至 AI 代理并输入以下提示以部署应用程序：

Deploy my repository <<repository-url>> on Back4app containers

将repository-url替换为应用程序的 GitHub 仓库 URL。上述提示将启动部署流程。

人工智能代理响应

如上图所示，人工智能代理启动了部署流程。同时，部署状态为“正在部署”。

几分钟后，您可以向 AI 代理询问应用程序的部署状态。如果应用程序已成功部署，部署状态将变为就绪。

就像这样

人工智能代理响应

在上图中，可以看到部署状态从“正在部署 “变为“准备就绪”，表明应用程序已成功部署并上线。

您可以使用提供的应用程序 URL 在浏览器上访问应用程序。

结论

在本文中，您将学习如何使用 React 构建一个简单的图库应用程序，从而使用 Back4app 上传和获取文件。

此外，您还将了解如何使用 Back4app AI 代理在 Back4app 上部署 React 应用程序。

通过 Back4app，您可以高效、安全地存储和管理文件。本教程中使用的代码可在此GitHub 代码库中获取。


David Ekete

David Ekete兼具资深技术作家和优秀后端开发者的双重专长，使他在提供清晰、全面的技术文档以及构建高效、可扩展的网络应用程序方面独树一帜，成为业界的权威。他的丰富背景包括在back4app、Draft.dev和MUO等行业领袖处担任高端职位，同时他在Elevate Apps和Terrahaptix等公司担任后端工程师和工程实习生时也表现出色。 凭借丰富的实践经验，David拥有The Linux Foundation、Sololearn和Udemy颁发的业内认可认证，证明了他在技术文档、API开发及现代编程语言方面的精通。他的资历与卓越业绩使他成为那些追求技术卓越和创新解决方案的团队不可或缺的资产。 请在 GitHub 🛠️ 上浏览他的前沿项目和代码仓库，并通过 LinkedIn 🔗 与他联系，了解他的专业知识如何提升您的技术项目。无论您需要专业技术文档、稳健的后端开发还是具备扎实工程基础的协作型问题解决者，David Ekete都已准备好带来显著影响。

Leave a reply

Your email address will not be published.