介绍
lmw-uploader 是一个基于 Vue.js 的前端上传组件，能够实现文件批量上传、文件类型限制、文件大小限制等功能，同时支持图片预览、拖拽上传等优化体验。
本文将详细介绍 lmw-uploader 的使用方法，包括安装、引入、配置和使用，以及常见问题解决方案。
安装
在项目中使用 npm 安装 lmw-uploader：
npm install lmw-uploader --save
引入
在需要使用 lmw-uploader 的组件中引入：
import LmwUploader from 'lmw-uploader'
在组件中注册：
export default {
components: {
LmwUploader
},
...
}配置
lmw-uploader 接收一个 props 对象来进行配置。下面列出了所有可用的配置项：
action
- 类型：
String - 默认值：
'' - 说明：上传地址，必填。
accept
- 类型：
String - 默认值：
'*' - 说明：允许上传的文件类型，如：
image/png,image/jpeg。
max-size
- 类型：
Number - 默认值：
0 - 说明：允许上传的文件大小，单位：MB，默认不限制。
multiple
- 类型：
Boolean - 默认值：
false - 说明：是否允许选择多个文件进行上传。
name
- 类型：
String - 默认值：
file - 说明：上传文件的参数名。
headers
- 类型：
Object - 默认值：
{} - 说明：上传请求的 headers。
data
- 类型：
Object - 默认值：
{} - 说明：上传请求的额外参数。
before-upload
- 类型：
Function - 默认值：
null - 说明：上传之前的钩子函数，可以在这里进行文件类型和文件大小的判断。
onSuccess
- 类型：
Function - 默认值：
null - 说明：上传成功之后的回调函数。
onError
- 类型：
Function - 默认值：
null - 说明：上传失败之后的回调函数。
btnText
- 类型：
String - 默认值：
选择文件 - 说明：上传按钮的文本。
limit
- 类型：
Number - 默认值：
0 - 说明：允许上传的最大文件数量。
defaultFiles
- 类型：
Array - 默认值：
[] - 说明：默认需要上传的文件。
使用
在组件中使用 lmw-uploader：
-- -------------------- ---- ------- ------------- --------------- ---------------- ------------------- ---------------- -------------------- ------------ ------------------ ------------ ----------------------------- ---------------------- ------------------ ------------------ -------------- ---------------------------- ----------------
其中，files 是 v-model 双向绑定的变量，表示已经上传的文件列表。
示例代码
-- -------------------- ---- -------
----------
-----
-------------
---------------
----------------
--------------
-----------------------------
----------------
-----------------------------
----------------------
------------------
------------------
----------
----------------
----
--- ----------- -- ------ ---------------
-- --------- --
-----
-----
------
-----------
--------
------ ----------- ---- --------------
------ ------- -
----------- -
-----------
--
------ -
------ -
------ ---
------- --------------
-------- -------
-
--
-------- -
------------------- -
-- -----------
--- ------- - ----
--- ------- - ----
----- ---- - ------------- ------------- ------------
--- ---- - - -- - - ------------- ---- -
-- ---------------------------- --- --- -
------- - -----
-----
-
-- -------------- - ---- - ---- - --- -
------- - -----
-----
-
-
-- ---------- -
----------------------------------
------ -----
-
-- ---------- -
------------------------------- ------
------ -----
-
------ ----
--
--------------- ----- -
-- ------
----------------- -----
--
------------ -
-- ------
----------------
-
-
-
---------常见问题解决方案
如何删除已上传的文件？
通过操作 files 数组即可删除已上传的文件，例如：
this.files.splice(index, 1)
如何重新上传已上传的文件？
再次选择相同的文件即可。
如何拿到已上传的文件地址？
在 onSuccess 回调函数中，第一个参数就是服务器返回的数据，数据中包含已上传的文件地址。
如何修改上传按钮的样式？
可以通过添加 slot="button" 来自定义上传按钮的样式：
<lmw-uploader> <button slot="button">自定义上传按钮</button> </lmw-uploader>
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb881e8991b448da3ed