介绍
xiedaimala-upload 是一个简单易用的 npm 包，可以快速实现前端图片上传功能，支持多文件同时上传，且可以设置上传进度回调函数，适用于大部分 Web 前端开发项目。
安装
在项目根目录中使用 npm 或者 yarn 安装：
--- ------- -----------------
---- --- -----------------
使用
引入
在需要使用的组件文件中引入 xiedaimala-upload：
------ ------ ---- --------------------
初始化
在组件中初始化一个 Upload 实例，并设置必要参数和上传进度回调函数：
----- ------ - --- --------
---- --------------------------------
--------- -----
--------- ----------------------- -
----- -------- - ---------
-------------------------------- - ---- - --------------------
--
-------------------- - -----
-
---可以被设置的参数有：
| 参数名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| url | string | 上传接口 | null |
| multiple | boolean | 是否支持多文件上传 | false |
| callback | function | 上传进度回调函数 | null |
| headers | object | 上传请求头 | {} |
绑定上传事件
将 file input 绑定 change 事件，用于选择文件并上传：
----- --------- - --------------------------------------------- ------------------------------------ -- -- - ----- ----- - ---------------- -- -------------------- ------------------------ ---
检测结果
在 callback 中获取上传结果：
----- ------ - --- --------
---- --------------------------------
--------- ----------------------- -
----- -------- - ---------
-------------------------------- - ---- - --------------------
--
-------------------- - -----
-
---
-- --------
----------------------------------- -- -
-- ---------------- --- ---- -
------------------- ----------
- ---- -
------------------- ---------
-
---完整示例
--------- -----
------
------
------------------------ ------------
-------
------
--------------------- ---------
------ ----------- --
------- --------------
------ ------ ---- -------------------------------------------------------------
----- ------ - --- --------
---- --------------------------------
--------- ----------------------- -
----- -------- - ---------
-------------------------------- - ---- - --------------------
--
-------------------- - -----
-
---
----- --------- - ---------------------------------------------
------------------------------------ -- -- -
----- ----- - ----------------
------------------------------------- -- -
-- ---------------- --- ---- -
------------------- ----------
- ---- -
------------------- ---------
-
---
---
---------
-------
-------深度学习和指导意义
xiedaimala-upload 封装了底层的 XMLHttpRequest 功能，提供前端开发者一个简易调用的上传组件。当一个企业需要在前端开发中快速实现文件上传功能，可以使用该组件避免从零开始编写上传相关的代码，提高开发效率。
同时，学习该组件的使用也可以加深对前端上传的原理和实现方式的理解。在使用该组件的同时，也可以了解到 XMLHttpRequest 的实现原理和相关的 HTTP 请求头和参数。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671c81e8991b448e379f