在前端开发中，文件上传是一个常见的需求。而使用第三方库可以大大减少我们开发上传功能的时间和工作量。这篇文章将介绍一个 npm 包，它是基于 webuploader 的二次封装，专门为七牛云提供文件上传服务的封装库，叫做 webuploader-for-qiqiuyun。
前置知识
在使用本库前，您需要先了解以下知识：
- JavaScript 基础知识
- Node.js 环境配置
- npm 包管理器的使用
安装和使用
使用 npm 包管理器可以轻松安装和使用本库。在您的项目根目录下输入以下命令：
npm install --save webuploader-for-qiqiuyun
接下来，您需要在您的项目中引入本库及其依赖。
<!-- 引入 CSS 文件 --> <link href="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.css" rel="stylesheet"> <!-- 引入 JavaScript 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script> <script src="./node_modules/webuploader-for-qiqiuyun/dist/bundle.min.js"></script>
注意：以上引用的是 CDN 上的文件地址，您也可以将这些文件下载到本地引用。
现在，在您的 JavaScript 代码中，您需要初始化 webuploader-for-qiqiuyun。
-- -------------------- ---- -------
--- -------- - ---------------
-- ------------
-------- ---
-- ------------------
------- ---
-- ----------------------- ---------- -----
-------------- ---
-- ----------------------------------
------- ---
-- --- -------------- -------
--------------- -------- ------ --- -
-- -- ----------------- -- --
--
-- -------
----- -------------
-- ------
--------- ------------------
-- ------------
---------- -------- ------ ----- -
-- ------------
--
-- ------------
---------- -------- ------ ---- -
-- ------------
-
---其中，主要的配置项有：
- uptoken：七牛云上传凭证，不能为空。
- pick：自定义上传按钮。
- progress：自定义进度条。
- onSuccess：文件上传成功后的回调函数。
- onFailure：文件上传失败后的回调函数。
示例代码
下面是一个完整的文件上传示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------
----- ------------------------------------------------------------------------------ -----------------
-------
------
----- ------------- -----------------
---- -------------- ---------- -------------
-- ---------------- --------------------
-----------------
------
---- ------------------- --------------------- ---------------------------------
-------
------- -----------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------
--------
--- -------- - ---------------
-------- ---
----- -------------
--------- ------------------
---------- -------- ------ ----- -
------------------- - ----------
--
---------- -------- ------ ---- -
------------------- - ----------------
-
---
---------
-------
-------总结
文件上传是前端开发中常见的功能，通过第三方库可以便捷地实现。本文向您介绍了一个 npm 包，它是基于 webuploader 的二次封装，专门为七牛云提供文件上传服务的封装库，叫做 webuploader-for-qiqiuyun。您可以使用 npm 包管理器轻松安装和使用本库，在初始化时需要将必要的参数传递给 QiniuUploader 函数，例如七牛云上传凭证、自定义上传按钮等等。本文给出了一个完整的示例代码，方便您快速入手使用该库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdf0f