在现代 web 应用中,文件上传已经成为了一个必不可少的功能。@boltline/apollo-upload-server 模块能够帮助我们快速并且简单地实现文件上传功能。
安装
你可以使用 npm 通过以下命令来安装 @boltline/apollo-upload-server 模块:
npm install @boltline/apollo-upload-server
使用
在你的服务器端代码中,你需要做以下的两个重要的步骤。
第一步:安装 multipart 处理器
在服务器端,我们需要使用 multipart 处理器来处理文件上传。一些 Node.js 的框架已经提供了这个功能,但是我们还是可以使用 npm 安装它。下面就以 Express.js 为例,你可以运行以下命令来安装 multer:
npm install --save multer
第二步:添加文件上传处理中间件
接下来,我们需要添加文件上传处理中间件到我们的 Apollo GraphQL 服务器中。在使用 @boltline/apollo-upload-server 之前,处理请求的语句可能看起来像这样:
app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));
现在,我们需要使用处理文件上传的一个中间件,将请求体中的文件存储起来,并将它们作为参数传递到 GraphQL resolvers 中。最后的代码将会看起来像这样:
const { GraphQLUpload } = require('@boltline/apollo-upload-server'); const multer = require('multer'); const storage = multer.memoryStorage(); const upload = multer({ storage }); app.use('/graphql', bodyParser.json(), upload.any(), graphqlUploadExpress({ schema, graphqlUpload: GraphQLUpload }));
上面的代码中,我们使用了 multer 中的 memoryStorage 来将上传的文件保存在内存中。当然,你也可以将文件存储在磁盘上,这不在本教程的讨论范围之内。
此外,我们需要将 GraphQLUpload 类传递给 graphqlUploadExpress 中间件作为图解器的选项 (option)。
第三步:编写 query,mutation,并将上传的文件作为参数传递
在前面的代码中,我们简单地添加了上传文件的处理中间件。接下来,我们将向你展示如何将这些上传的文件对象作为参数传递给 GraphQL resolvers。下面给出一个简单的文件上传的 mutation:
mutation singleUpload($file: Upload!) { singleUpload(file: $file) { filename mimetype encoding } }
从上面的代码中,我们可以看出,你可以将上传的文件作为简单的变量来传递。
async singleUpload(parent, { file }) { const { createReadStream, filename, mimetype, encoding } = await file; // 这里的 createReadStream 和 fs.createReadStream 几乎一样,以示例代码为准 const stream = createReadStream(); // 将文件存储在某个地方 await storeUpload({ stream, filename }); return { filename, mimetype, encoding }; },
上面的代码中,我们简单地将创建读取流、文件名、mimetype 和编码组合起来,然后将它们作为一个整体返回。在实现存储上传文件的 storeUpload 函数中你需要自己根据自己的需要修改,我们不会在这个教程中做详细的解释。
示例代码
下面给出一个完整的示例代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- - -------------- - - --------------------------------- ----- - ------------- - - ------------------------------------------ ----- ------ - ------------------ ----- - -------------------- - - ------------------------- ----- - ------------ - - -------------- ----- - ---- - - ---------------- ----- --- - ---------- ----- ------- - ----------------------- ----- ------ - -------- ------- --- -- ------------- ----- -------------- - - ------ -------- ---- ------ ----- ------- -- -- -- ------- ------ ----- -------- - ---------------------------- ------------------ -------- -- -- --------- ----- --------- - - ------ - ------ -------- - --- -- -- -------------------- -- --------- - ------------- ----- -------- - ---- -- -- - ----- - ----------------- --------- --------- -------- - - ----- ----- ----- ------ - ------------------- -- --------- ----- ------------- ------- -------- --- ------ - --------- --------- -------- -- -- -- -- -- -- ------ ----- ------ - ---------------------- --------- ---------- --- -- ---------- ------------------- ------------------ ------------- ---------------------- ------- -------------- ------------- ---- -- ---- ---------------- -- -- - ------------------- --------- -- ---- ------- ---
结论
使用 @boltline/apollo-upload-server 模块,我们可以轻松地在我们的 Apollo GraphQL 服务器中实现文件上传功能。当然,在不同的框架和环境下,做出的一些具体实现还是会有所不同,但总的来说,这个步骤是相对固定的。
为了更好的展示具体使用,我们还给出了一个样例代码。在这个例子中,我们使用了 multer 作为我们上传文件的处理器,在 GraphQL schema 中,我们定义了 Query.type 和 Mutation.type,然后使用 makeExecutableSchema 函数创建一个实现模式的 schema 对象,并将其与我们的 resolvers 相结合。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60065f8f238a385564ab6f6e