GraphQL 是一种用于 API 的查询语言，它可以让前端开发者更加高效地查询和修改后端数据。在使用 GraphQL 时，我们可能会遇到上传文件的需求。本文将详细介绍 GraphQL 上传文件的问题以及解决方案，并提供示例代码供参考。
问题描述
在使用 GraphQL 上传文件时，我们可能会遇到以下问题：
- 上传文件的大小受到限制。
- 上传文件的类型受到限制。
- 上传文件的进度无法获取。
- 上传文件的错误信息无法获取。
这些问题都会影响我们使用 GraphQL 上传文件的效率和可靠性。下面，我们将分别讨论这些问题的解决方案。
解决方案
上传文件的大小受到限制
在 GraphQL 中，上传文件的大小受到服务器端的限制。如果上传的文件大小超过了服务器端的限制，那么就会上传失败。为了解决这个问题，我们可以在客户端对上传的文件进行限制。具体来说，可以通过以下方式对上传文件的大小进行限制：
-- -------------------- ---- -------
-------- ----------------- -------- -
---------------- ------ -
---
-
-
- -----
----- ---- - -----------------------------------------
----- ------------- - ---- - ---- - --- -- ----
-- ---------- - -------------- -
----------------------
- ---- -
----- --------- - - ---- --
--------------- --------- ------------ --------- ---
-在客户端代码中，我们首先获取上传的文件，然后通过比较文件大小和服务器端限制的大小来判断是否可以上传。如果可以上传，就将文件作为变量传递给 GraphQL 的上传文件操作。
上传文件的类型受到限制
在 GraphQL 中，上传文件的类型也受到服务器端的限制。如果上传的文件类型不符合服务器端的要求，那么就会上传失败。为了解决这个问题，我们可以在客户端对上传的文件类型进行限制。具体来说，可以通过以下方式对上传文件的类型进行限制：
-- -------------------- ---- -------
-------- ----------------- -------- -
---------------- ------ -
---
-
-
- -----
----- ---- - -----------------------------------------
----- ------------- - -------------- ------------ -------------
-- ------------------------------------ -
-----------------
- ---- -
----- --------- - - ---- --
--------------- --------- ------------ --------- ---
-在客户端代码中，我们首先获取上传的文件，然后通过比较文件类型和服务器端限制的类型来判断是否可以上传。如果可以上传，就将文件作为变量传递给 GraphQL 的上传文件操作。
上传文件的进度无法获取
在 GraphQL 中，上传文件的进度无法直接获取。这是因为 GraphQL 的上传文件操作是异步的，而且没有提供获取进度的接口。为了解决这个问题，我们可以通过一些技巧来获取上传文件的进度。具体来说，可以通过以下方式获取上传文件的进度：
-- -------------------- ---- -------
-------- ----------------- -------- -
---------------- ------ -
---
-
-
- -----
----- ---- - -----------------------------------------
----- --- - --- -----------------
--------------------------------------- ------- -- -
----- ------- - ------------ - ----------- - ----
--------------------------------
---
---------------- ------------
----- -------- - --- -----------
----------------------------- ----------------
------ ------------
---------- - ----- ---- --
----
---------------------- ----------------
-- -------------------
----
-------------------- ------
-------------------在客户端代码中，我们首先创建一个 XMLHttpRequest 对象，然后通过监听 upload 事件来获取上传进度。在发送请求时，我们将上传文件的操作和变量以及文件数据一起打包成 FormData 对象，然后通过 send 方法发送请求。这样，我们就可以获取上传文件的进度了。
上传文件的错误信息无法获取
在 GraphQL 中，上传文件的错误信息也无法直接获取。这是因为 GraphQL 的上传文件操作是异步的，而且没有提供获取错误信息的接口。为了解决这个问题，我们可以通过一些技巧来获取上传文件的错误信息。具体来说，可以通过以下方式获取上传文件的错误信息：
-- -------------------- ---- -------
-------- ----------------- -------- -
---------------- ------ -
---
-
-
- -----
----- ---- - -----------------------------------------
----- --- - --- -----------------
---------------------------- ------- -- -
----- -------- - --------------------------------------
-- ----------------- -
-------------------------------
--------------
- ---- -
--------------------
-
---
---------------- ------------
----- -------- - --- -----------
----------------------------- ----------------
------ ------------
---------- - ----- ---- --
----
---------------------- ----------------
-- -------------------
----
-------------------- ------
-------------------在客户端代码中，我们首先创建一个 XMLHttpRequest 对象，然后通过监听 load 事件来获取响应数据。在响应数据中，如果存在 errors 字段，那么就说明上传文件出现了错误。此时，我们可以打印错误信息并弹出提示框。否则，就说明上传文件成功。
总结
通过本文的介绍，我们了解了 GraphQL 上传文件时可能遇到的问题以及解决方案。具体来说，我们可以通过客户端对上传文件的大小和类型进行限制，通过 XMLHttpRequest 对象获取上传文件的进度和错误信息。这些技巧可以帮助我们更加高效地使用 GraphQL 上传文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e185721886fbafa4e80329