简介
@beisen-phoenix/field-upload 是一款开源的前端上传组件，适用于上传文件的场景并且支持 IE 11 及以上版本浏览器。其具有以下特点：
- 轻量级：压缩后仅 6KB 左右；
- 可自定义：支持自定义上传的后端地址、上传的文件名、上传的文件类型等；
- 可配置项多：支持多张图片上传、支持文件预览等。
在本文中，我们将详细介绍 @beisen-phoenix/field-upload 的使用方法，并提供一些实用的示例代码。
安装
首先，需要安装 npm 包：
npm install @beisen-phoenix/field-upload
然后，在 HTML 页面中加入以下代码：
<input type="file" id="fileUpload" />
使用 @beisen-phoenix/field-upload 的起步步骤就这么简单，而它的具体的使用会更加强大，下面我们来一步步了解。
使用
上传文件
-- -------------------- ---- ------- ------ ----------- ---- ------------------------------- ----- ----------- - --- -------------------------- - ---------- ------------------------------ ----------- ------- ------------------------------ - -------------------------- -- ----------------------- - ---------------------- - --- --------------------展开代码
要使用上传功能，您需要为 FieldUpload 构造函数传递两个参数：
- 第一个参数是文件输入框的 CSS 选择器；
- 第二个参数是一个配置对象，其中包含上传所需的参数。
在配置对象中，我们需要指定 uploadUrl，这是上传文件的后端接口地址。
同时，我们也可以指定文件名和文件类型。
进度条
-- -------------------- ---- ------- ------ ----------- ---- ------------------------------- ----- -------- - ------------------------------------ ----- ----------- - --- -------------------------- - ---------- ------------------------------ ------------ -------- --- --------------------展开代码
如果您想显示一个进度条，只需要定义一个 HTML 元素并将其传递给 FieldUpload 的配置对象即可。进度条可以是任何支持 width 属性的 HTML 元素，例如 div 或者 span。在上传文件的过程中，进度条的 CSS 属性 width 会随着上传进度的变化而变化。
预览图片
-- -------------------- ---- ------- ------ ----------- ---- ------------------------------- ----- ------- - ----------------------------------- ----- ----------- - --- -------------------------- - ---------- ------------------------------ --------------------- - ----- ------ - --- ------------- ------------- - ------- -- - ----- - ------ - - ------------- ----------------------------------------- -- --------------------------- - --- -------------------- -------- ---------------- - ----- --- - ------------------------------ ------- - ---- --------- - ---- ---------- - ---- ------ ---- -展开代码
如果您希望在上传之前就预览已选择的图片，只需要指定预览回调函数即可。预览回调函数会传递一个文件对象，您可以使用 FileReader API 将其转换为 base64 格式的数据，并创建一个新的 Image 元素来显示图片。
多张图片上传
-- -------------------- ---- ------- ------ ----------- ---- ------------------------------- ----- ----------- - --- -------------------------- - ---------- ------------------------------ --------------- ----- ------------------------------- - --------------------------- - --- --------------------展开代码
如果您需要上传多张图片，您只需要在配置对象中设置 uploadMultiple 选项为 true 即可。当上传完成之后，FieldUpload 的回调函数将传递一个包含多个上传结果的数组。
结语
至此，我们介绍了 @beisen-phoenix/field-upload 的主要使用方法。无论您是在开发 Web 应用程序或维护现有的应用程序，都可以将它用作上传文件的首选组件。如果您还有更深入的使用方法或精彩案例，欢迎分享给我们！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/136492
