koa-graphql-upload 是一个基于 Koa 框架的 Graphql 文件上传中间件,它能够将文件上传的过程封装在 GraphQL 的 resolvers 中,方便前端和后端的对接。本文将介绍如何使用 koa-graphql-upload 来上传文件。
安装
可以使用 npm 或者 yarn 安装 koa-graphql-upload
npm install koa-graphql-upload
yarn add koa-graphql-upload
使用
在使用 koa-graphql-upload 之前,首先需要在 Koa 项目中添加 koa-bodyparser 和 koa-router 两个插件。这里不再赘述,具体使用方法可以参考 Koa 的官方文档。
安装完毕后,我们需要在 Koa 的服务器端代码文件中引入 koa-graphql-upload 并基于其生成 GraphQL schemas、resolvers。
-- -------------------- ---- ------- ----- --- - --------------- ----- ------ - ---------------------- ----- ------- - -------------------------- ----- - ---------------- - - ------------------------------ ----- - -------------------- - - --------------------------------- ----- -------- - ---------------------- ----- --------- - ----------------------- -- -- ------- ----------------- ----- ------ - ---------------------- --------- ---------- --- ----- --- - --- ------ ----- ------ - --- --------- -- ---------------- --- ------ ---------- ------------ ----------- ---------- ------------------ ------------ --------- --------- -- --- ------------- ------- --------- ----- -- -- ------------------------- --------------------------------- ---------------- -- -- ------------------- ------- -- ---------------------------------
上面我们提到了 typeDefs 和 resolvers 两个文件,可以通过如下方式定义它们。
typeDefs
scalar Upload type Mutation { uploadFile(file: Upload!): Boolean }
resolvers
const resolvers = { Mutation: { async uploadFile(_, { file }, { ctx }) { const upload = await processUpload(file, 5000000, ctx); return upload !== undefined; }, }, };
processUpload
在上述 resolvers 中,我们替换了一部分内容以便更好地展示如何在后台处理文件上传逻辑。其中 processUpload 函数是自定义的请求处理程序,用于在上传时检查 file 上传是否成功。可以根据业务逻辑自由调整,控制文件上传失败的提示信息和处理方法。下面的示例中,我们会使用 Koa 的 ctx.response.json() 函数向前端响应操作结果,也可以视情况选择其他方式。
-- -------------------- ---- ------- ----- -------- --------------------- ---------- ---- - ----- - ----------------- --------- --------- -------- - - ----- ------- ----- ------ - ------------------- --- --------- - -- ----- ------ - --- ------ --- ----------------- ------- -- - ----------------- ----- ------- -- - --------- -- ------------- -- ---------- - ---------- - ------------------- -------- ------- --- ----------------- ---------- ---------------- ------ --- - ------------------- --- ---------------- ----- -- -- - ----- ---------- - ---------------------- ----- -------- - - --------- --------- --------- ---------- -- ------------------ --- ------------------ ----- -- - ------------------- -------- ------- --- ----------------- ------------ --- --- -
使用示例
现在我们已经完成了后台的设置与上传流程的处理程序,接下来我们将给出一个简单的前端上传代码示例,利用 koa-graphql-upload 完成用户头像或其他文件上传。
React 示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- - ---- ----------------- ------ --- ---- -------------- ----- ----------- - ---- -------- ----------------- ------- - ---------------- ------ - -- -------- -------- - ----- ------ -------- - --------------------- ----- ------------ - ------------------------- ----- ------------ - --- -- - ------------------- ------------ ---------- - ---- -- --- -- ----- ---------------- - --- -- - --------------------------- -- ------ - ----- ------------------------ ------ ----------- ----------- --------------------------- -- ------- ------------------------- ------- -- - ------ ------- -------
Vue 示例代码
-- -------------------- ---- ------- ---------- ----- ------ ----------- --------------- -------------------------- -- ------- ------------- ------------------------------- ------ ----------- -------- ------ - ----------- - ---- ----------------- ------ --- ---- -------------- ----- ----------- - ---- -------- ----------------- ------- - ---------------- ------ - -- ------ ------- - ----- -- -- -- ----- ----- --- ------- - ----- - ------- ---------- - - ------------------------- ----- ------------ - --- -- - ------------------- ------------ ---------- - ----- ---------- -- --- -- ----- ---------------- - --- -- - --------- - ------------------ -- ------ - ----------- ------------- ----------------- ----- -- -- -- ---------
总结
到这里,我们已经介绍了 koa-graphql-upload 的使用方法和一些示例代码。在整个文件上传流程中,koa-graphql-upload 扮演了重要的角色,大大简化了 Graphql 上传文件的接口设计。不过,由于涉及文件的上传和下载,一定要注意打开跨域资源共享(CORS)功能,才能让前端客户端顺利与后台进行数据交互。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055cde81e8991b448da7dd