前言
在前端开发中，处理图像上传是一项常见的任务。为了方便地完成这项任务，我们可以使用 images-formsy-input 这个 NPM 包。本文将向您介绍如何使用 images-formsy-input。
安装
在终端中运行以下命令来安装 images-formsy-input：
npm install images-formsy-input --save
导入
使用 images-formsy-input 的第一步是导入它。在您的 JS 文件中插入以下代码：
import ImageFormsyInput from 'images-formsy-input'
创建组件
使用 ImageFormsyInput 来创建您的表单组件。以下是一个可以接受图像和标题的复合组件的示例。您必须将 ImageFormsyInput 组件包装在 Formsy 包装器中，以启用表单验证。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ---------------------
------ ---------------- ----------- ---- --------------
------ ---------------- ---- ---------------------
----- --------------------- ------- --------- -
------------------ -
-------------
-
-------- -
------ -
----------------
----------------- --------------- -- -------------- - --------
---------
--------
------------------------
------------------ ------
--
-----------------
-
-
-
------ ------- ----------------------------------图像预览
一旦用户选择图像，您可能希望在用户提交之前为用户提供一个预览。在本例中，我们将通过 handleImageChange 函数来实现预览。
-- -------------------- ---- -------
------------------------ -
-----------------------
--- ------ - --- -------------
--- ---- - ----------------------
---------------- - -- -- -
---------------
----- -----
---------------- -------------
---
-
--------------------------
-
-------- -
---
--- ----------------- - -----------
--- ------------- - -----
------------------- -
------------- - ----- -------------------------
- ---- -
------------- - ----- ------------------------------ ------ -- ----- --- ---------------
-
------ -
----------------
-----------------
--------------- -- -------------- - ------
---------------------- -- --------------------------
--
---------------
---------
--------
------------------------
------------------ ------
--
-----------------
-
- 文件上传
最后，我们需要将图像上传到服务器。我们将使用 Axios 来完成此操作。以下是完整的组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ---------------------
------ ---------------- ----------- ---- --------------
------ ----- ---- --------
------ ---------------- ---- ---------------------
----- --------------------- ------- --------- -
------------------ -
-------------
---------- - -
----- ---
---------------- --
-
-
------------------------ -
-----------------------
--- ------ - --- -------------
--- ---- - ----------------------
---------------- - -- -- -
---------------
----- -----
---------------- -------------
---
-
--------------------------
-
----------------------- -
-----------------------
----- -------- - --- -----------
----------------------- -----------------
--------------------- --------- -
-------- -
--------------- ---------------------
-
--
-------------- -- -
--------------------------
--
------------ -- -
------------------
---
-
-------- -
--- ----------------- - -----------
--- ------------- - -----
------------------- -
------------- - ----- -------------------------
- ---- -
------------- - ----- ------------------------------ ------ -- ----- --- ---------------
-
------ -
----------------
----- ----------------- -- ------------------------------
-----------------
--------------- -- -------------- - ------
---------------------- -- --------------------------
--
---------------
---------
--------
------------------------
------------------ ------
--
------- -----------------------------
-------
-----------------
-
-
-
------ ------- ----------------------------------注意，我们创建了一个 FormData 对象，将图像文件添加到其中并将其提交到服务器。服务器将根据需要处理该文件。
总结
使用 images-formsy-input，您可以轻松地创建具有图像上传功能的表单组件。这些组件中的图像可以轻松预览和上传到服务器。希望本文能够帮助您更好地了解 images-formsy-input，并使您更容易实现复杂的图像上传用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d581e8991b448d4e14