如何在 Node.js 中使用 GraphQL 的 graphql-upload 实现文件上传？
GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、强大的方式来获取数据。而 graphql-upload 则是一个用于在 GraphQL 中处理文件上传的库。本文将介绍如何在 Node.js 中使用 graphql-upload 实现文件上传。
准备工作
首先，我们需要在项目中安装 graphql-upload，可以使用 npm 或 yarn 安装：
npm install graphql-upload
或者
yarn add graphql-upload
然后，在创建 GraphQL 服务器时，需要使用 graphql-upload 的中间件来处理文件上传。如果你使用的是 express，可以这样引入中间件：
const { graphqlUploadExpress } = require('graphql-upload');然后，在创建 express 应用程序时，将中间件添加到路由器中：
const express = require('express');
const { graphqlUploadExpress } = require('graphql-upload');
const app = express();
app.use('/graphql', graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }));在这里，我们将中间件添加到了 /graphql 路由器中，并设置了最大文件大小为 10MB，最大文件数为 10。
实现文件上传
接下来，我们来实现一个简单的文件上传示例。首先，我们需要定义一个 GraphQL mutation，用于上传文件：
mutation ($file: Upload!) {
uploadFile(file: $file) {
filename
mimetype
encoding
}
}这个 mutation 接受一个名为 file 的参数，类型为 Upload，表示要上传的文件。然后，它返回一个包含文件名、MIME 类型和编码的对象。
然后，在 resolver 中实现文件上传逻辑：
-- -------------------- ---- -------
----- - ------------- - - --------------------------
----- --------- - -
------- --------------
--------- -
----- ------------------ - ---- -- -
----- - ----------------- --------- --------- -------- - - ----- -----
-- -- --------- ---- --- ----
----- ------ - -------------------
-- ---
------ - --------- --------- -------- --
--
--
--首先，我们需要将 Upload 类型添加到 resolvers 中，这样才能在 mutation 中使用。然后，我们在 uploadFile resolver 中获取文件的 createReadStream、filename、mimetype 和 encoding 属性，并将其传递给某些处理文件的函数中。在这里，我们只是打印出文件名，并返回包含文件名、MIME 类型和编码的对象。
最后，我们需要在 GraphQL schema 中定义 Upload 类型：
-- -------------------- ---- ------- ------ ------ ---- ---- - --------- ------- --------- ------- --------- ------- - ---- -------- - ---------------- --------- ----- -
在这里，我们定义了一个名为 Upload 的 scalar 类型，并将其用于文件上传。然后，我们定义了一个名为 File 的类型，包含文件名、MIME 类型和编码。最后，我们定义了一个名为 uploadFile 的 mutation，接受一个名为 file 的 Upload 类型参数，并返回一个 File 类型对象。
使用前端实现文件上传
最后，我们来看一下如何在前端使用 GraphQL 和 graphql-upload 实现文件上传。首先，我们需要使用 apollo-upload-client 来实现文件上传：
npm install apollo-upload-client
或者
yarn add apollo-upload-client
然后，我们需要将 apollo-upload-client 和 graphql-tag 作为依赖项导入：
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';
import { gql } from 'graphql-tag';然后，我们可以创建一个 ApolloClient，将 createUploadLink 作为链接。然后，我们可以使用 gql 函数来定义我们的 mutation：
-- -------------------- ---- -------
----- ------ - --- --------------
----- ------------------ ---- ---------- ---
------ --- ----------------
---
----- ----------- - ----
-------- ------- -------- -
---------------- ------ -
--------
--------
--------
-
-
--在这里，我们定义了一个名为 UPLOAD_FILE 的 mutation，并将其传递给 ApolloClient。
最后，我们可以使用 useMutation hook 来调用 mutation：
-- -------------------- ---- ------- ------ - ----------- - ---- ----------------- ----- ------------ - ------------------------- ----- ---------------- - ----- --- -- - ----- ---- - ------------------ ----- ------ - ----- ------------ ---------- - ---- - --- ------------------------------------ --
在这里，我们使用 useMutation hook 来调用 UPLOAD_FILE mutation，并传递文件作为参数。然后，我们使用 console.log 输出上传文件的信息。
结论
在本文中，我们介绍了如何在 Node.js 中使用 graphql-upload 实现文件上传。我们从安装 graphql-upload 开始，然后讨论了如何在 GraphQL schema 中定义 Upload 类型，并使用 apollo-upload-client 在前端实现文件上传。通过本文，你应该能够了解如何使用 graphql-upload 实现文件上传，并将其应用于实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6762a318856ee0c1d4082946