前言
随着网络技术的不断发展,前端同学对于文件上传的需求也越来越高,而使用传统的表单方法进行文件上传也已经逐渐过时。在 React 生态系统中,相信大家都知道 Apollo 这个库,它是一个 GraphQL 客户端工具集,提供了 Reactive 数据架构、缓存处理、查询构建等强大的功能。本文就要为大家介绍一个基于 Apollo 的文件上传工具——gullitmiranda-apollo-upload-client。
安装
首先,我们需要将此工具安装到我们的项目中。可以使用 npm/yarn 来安装:
// 使用 npm 安装 npm install gullitmiranda-apollo-upload-client // 使用 yarn 安装 yarn add gullitmiranda-apollo-upload-client
使用方式
安装完成后,我们就可以在项目中引入它:
import { createUploadLink } from 'gullitmiranda-apollo-upload-client';
那么,接下来就是使用的方法了。
第一步:创建 HttpLink
创建 HttpLink 步骤与一般使用 Apollo Client 所示例化的方法一样:
const httpLink = createHttpLink({ uri: 'https://my-graphql-server.com/graphql' });
第二步:创建 Apollo Client
const client = new ApolloClient({ link: ApolloLink.from([authMiddleware, httpLink]), cache: new InMemoryCache() });
第三步:创建 UploadLink
const uploadLink = createUploadLink();
注意:此处 createUploadLink() 函数默认将文件上传处理的模式设置为 "single"。
第四步:创建 Apollo Client
const client = new ApolloClient({ link: ApolloLink.from([authMiddleware, uploadLink]), cache: new InMemoryCache() });
示例代码
-- -------------------- ---- ------- ------ - ------------- ----------- ------------- - ---- ----------------- ------ - ---------------- - ---- ------------------------------------- ----- -------- - ---------------- ---- --------------------------------------- --- ----- ---------- - ------------------- ----- ------ - --- -------------- ----- -------------------------- ------------- ------ --- --------------- ---
配置选项
模式设置
通过设置 "single" 或 "multiple" 两种上传模式,来指定上传器可以上传几个文件。如果没有指定,它默认为 "single"。
const uploadLink = createUploadLink({ // 设置上传模式,默认为 "single" // 如果将 mode 设置为 "multiple",你将不得不同时更新你的 GraphQL 服务端,以接受多文件上传 mode: 'multiple' });
自定义 Headers
如果你需要为请求头部添加自定义的 Headers,你可以使用 "headers" 属性,通过函数或者常规对象来添加。
-- -------------------- ---- ------- ----- ---------- - ------------------ -------- - -- ------ -------------- ------- ---------------------------------- -- ---- ------------------- -- -- ------------------------------------- - ---
自定义文件字段名称
使用者可以通过 "fieldName" 属性对请求中的文件字段名称进行自定义设置。如果你不设置,将默认为 "file"。
const uploadLink = createUploadLink({ fieldName: 'avatar' });
自定义文件类型
如果需要精确控制上传文件的 MIME 类型(例如,当解决浏览器黑名单的情况时),你可以使用 "getFileType" 属性自定义设置。
const uploadLink = createUploadLink({ getFileType: (file) => { const mimeType = file.type.split('/')[0]; return mimeType === 'image' ? 'image/jpeg' : 'application/octet-stream'; } });
自定义上传中间件
我们可以通过 createUploadLink 方法下的 HttpLink 函数,来创建我们的自定义上传中间件。
-- -------------------- ---- ------- ----- ---------- - ------------------ ----------- ----- ----------- -------- -- - ---------------------- -------- - -------------- ------- --------------------------------- - --- ----- - -------- - - ----- -------------------------------- -- ---------- - ----- - ------- - - --------- ----- ----- - ----------------------------- -- ------- - ----------------------------- ------- - - ------ --------- - ---
结论
本文为大家介绍了在基于 Apollo 的 GraphQL 客户端中,如何使用 npm 包 gullitmiranda-apollo-upload-client 来进行文件上传。通过本文提供的使用方式、示例代码以及配置选项,希望可以帮助更多的同学们在实际开发中更便捷地实现此功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055f1581e8991b448dca94