如何在 GraphQL 网站中实现文件上传？

javascript

2024-06-05 11:07:36

网站文件上传：利用 Google Cloud Storage 和 GraphQL 实现

问题

在当今数字时代，网站经常需要用户上传图像或文件。但是，默认情况下，GraphQL 不支持文件上传。本文将指导你如何使用 GraphQL-Upload 和 Google Cloud Storage 实现网站文件上传。

解决方法：GraphQL-Upload 和 Google Cloud Storage

GraphQL-Upload

GraphQL-Upload 是一个 GraphQL 库，允许客户端将文件上传到支持 GraphQL 的服务器。它通过提供一个符合 GraphQL 标准的 API 来实现这一点，使客户端可以轻松上传文件。

Google Cloud Storage

Google Cloud Storage 是 Google 提供的云存储服务。它提供了安全且可扩展的方式来存储和检索文件，包括图像。

实现步骤

前端

安装 apollo-upload-client，它是一个 Apollo 客户端库。
使用 createUploadLink 创建一个上传链接，并添加 Apollo-Require-Preflight 标头。
使用 FileInput 组件允许用户选择文件。

后端

使用 graphql-upload 库来处理文件上传。
使用 Google Cloud Storage SDK 将文件上传到 Google Cloud Storage。
使用 GraphQL 查询来检索上传的文件。

示例代码

// 前端
import { FileInput } from "react-file-input";
import { useMutation } from "@apollo/client";
import gql from "graphql-tag";

const UPLOAD_FILE = gql`
  mutation UploadFile($file: Upload!) {
    uploadFile(file: $file) {
      id
      name
      url
    }
  }
`;

// ...

<FileInput onChange={handleFileInputChange} accept="image/*" multiple={false} />
<button onClick={handleFileUpload}>Upload File</button>

// ...

// 后端
const storage = new Storage();
const bucketName = "your-bucket-name";

const uploadFile = (file, filename) => {
  // ...

  return storage.bucket(bucketName).upload(file, options);
};