介绍
npm 是世界上最大的软件包管理系统之一，而 @blinkmobile/bm-uploader 是 npm 上一个实现简单易用的前端上传组件。它可以帮助开发者在前端轻松地实现文件上传功能，也提供了许多自定义选项和事件钩子给开发者来灵活的配置和扩展。
本篇文章将详细的讲解如何使用 @blinkmobile/bm-uploader 对上传文件进行控制。
安装
要使用 @blinkmobile/bm-uploader，需要首先安装它。可以使用 npm 命令进行安装：
npm install @blinkmobile/bm-uploader
安装成功后，导入该组件并将其注册到 Vue。示例如下：
import Vue from 'vue';
import BmUploader from '@blinkmobile/bm-uploader';
Vue.component('BmUploader', BmUploader);或者可以直接在 Vue 的 components 选项中进行注册：
import BmUploader from '@blinkmobile/bm-uploader';
export default {
name: 'Page',
components: {
BmUploader
}
}使用
@blinkmobile/bm-uploader 提供了许多选项和事件钩子来控制上传组件的行为。让我们一步步地来使用它。
基本用法
最简单的使用方式是在模板中引入 <BmUploader> 组件，并使用 v-model 绑定一个数据变量，如下：
<bm-uploader v-model="files"></bm-uploader>
此时，我们可以通过访问 files 变量获取上传的文件列表。
自定义请求
默认情况下，@blinkmobile/bm-uploader 会将文件上传到当前页面的 URL 地址。如果需要将文件上传到其他接口，需要使用 upload-url 属性。
upload-url 属性可以设置字符串类型的 URL，也可以设置一个返回 URL 的函数。示例代码：
<bm-uploader v-model="files" :upload-url="uploadUrl"></bm-uploader>
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------ ---
---------- -- -- -
------ ------------------------------------
-
-
-
-自定义请求头
有时候，上传文件时需要在请求头里加入一些自定义的信息，@blinkmobile/bm-uploader 也提供了相应的选项。
使用 upload-headers 属性设置一个对象类型的请求头即可。
<bm-uploader v-model="files" :upload-headers="headers"></bm-uploader>
-- -------------------- ---- -------
------ ------- -
------ -
------ -
-------- -
-------------- ------- ------
-
-
-
-自定义文件参数
上传文件时，可以通过 file-param 属性设置文件的 key 值，即文件将使用该 key 向服务器上传。
<bm-uploader v-model="files" :file-param="'upload'"></bm-uploader>
自定义文件类型
有时候，需要限制上传文件的类型。可以使用 accept 属性设置文件类型，允许提交的文件类型可以是单个 MIME 类型、文件类型的列表、单个文件扩展名或文件扩展名列表。
示例代码：
-- -------------------- ---- ------- ---- -- ---- -- --- ------------ --------------- ------------------------------- ---- -- ---- -- --- ------------ --------------- ---------------- -------------------- ---- ----- --- ------------ --------------- ---------------------------- ---- ----- --- ------------ --------------- ------------- --------------------
验证
@blinkmobile/bm-uploader 可以自动验证上传的文件大小，但有时候需要更加细致的验证。需要使用 before-upload 钩子来自定义上传前的验证。
如果 before-upload 钩子返回 false 或 Promise 中 resolve 了 false，上传将被阻止。
示例代码：
<bm-uploader v-model="files" @before-upload="beforeUpload"></bm-uploader>
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------ --
-
--
-------- -
------------------ -
-- ---------- - -- - ---- - ----- -
------------- -------
------ ------
-
-
-
-事件
@blinkmobile/bm-uploader 提供了多个事件钩子，可以监听上传组件的变化并执行对应的逻辑。
before-upload：上传文件前的事件钩子。upload-start：开始上传文件的事件钩子。upload-success：上传成功的事件钩子。upload-error：上传失败的事件钩子。remove-file：删除文件后的事件钩子。
监听这些事件钩子很容易，使用 v-on 或 @ 命令即可。可以传递一个回调函数来执行事件触发后的逻辑。
<bm-uploader v-model="files" @upload-success="onUploadSuccess"></bm-uploader>
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------ --
-
--
-------- -
------------------------- -
----------------------
--------------
-
-
-总结
@blinkmobile/bm-uploader 是一个强大的前端上传组件，可以帮助开发者更加方便和灵活地实现文件上传功能。本文介绍了该组件的安装、使用方法，同时也详细地讲解了自定义请求头、文件类型、验证、以及事件钩子的使用。希望读者可以通过本文了解到该组件的具体功能和使用方法，并能够更加方便地使用它来控制文件上传。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f8d9381d61a3540f6a