Vue Upload Container
基于 Vue 的文件上传容器
📦 安装
$ npm i vue-upload-container -S🔨 使用
下面展示点击图片，弹窗选择新图片上传，替换原图片
<template>
<div class="home">
<UploadContainer
:action="uploadUrl"
:headers="{ Token: token }"
:fileName="'icon'"
:limit="1"
:maxSize="1024 * 1024"
:minSize="1024 * 10"
:beforeSelectFile="beforeSelectFile"
:beforeUploadAll="beforeUploadAll"
:beforeUpload="beforeUpload"
:onExceedLimit="onExceedLimit"
:onExceedMinSize="onExceedMinSize"
:onExceedMaxSize="onExceedMaxSize"
:onChange="onChange"
:onBegin="onBegin"
:onProgress="onProgress"
:onSuccess="onSuccess"
:onError="onError"
>
<div
class="img-area"
:style="{ 'background-image': `url(${previewUrl})` }"
></div>
</UploadContainer>
</div>
</template>
...📷 效果图
🔠 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| disabled | Boolean | false | 点击本组件是否有效 |
| action | String | - | 上传文件的后端服务地址 |
| fileName | String | "file" | 文件对象对应的表单字段名 |
| limit | Number | Infinity | 同一批次上传的文件个数限制 |
| minSize | Number | 0 | 文件尺寸的最小限制 |
| maxSize | Number | Infinity | 文件尺寸的最大限制 |
| accept | String | - | 可接受的文件 MIME 类型 |
| autoUpload | Boolean | true | 是否选好文件后就自动上传 |
| headers | Object | {} | 设置上传的请求头部 |
| extraData | Object | {} | 上传时附带的额外参数 |
🛠️ 方法
| 方法名 | 参数 | 说明 |
|---|---|---|
| Upload | _ | 触发上传动作。当属性 autoUpload 为 false 时，需要调用本方法触发上传 |
| ClearFiles | - | 清空选择的所有文件。其中一个作用是，调用本方法后，即使再次弹窗时选择同一文件， onChange 事件也会触发 |
| SetFiles | 浏览器内置 File 类型的对象数组 | 手动设置需要上传的文件列表 |
🎣 钩子属性
| 函数名 | 参数 | 说明 |
|---|---|---|
| beforeSelectFile | - | 选择文件之前的钩子，返回 false 将不再弹窗选择文件 |
| beforeUploadAll | files | 上传所有文件之前的钩子，返回 false 将会中止所有文件上传 |
| beforeUpload | file, files | 上传单个文件之前的钩子，返回 false 将会中止单个文件上传；如果返回对象则对象本身会追加到 extraData 中 |
| onExceedLimit | files | 超过上传文件的个数限制时的钩子 |
| onExceedMinSize | files | 某个文件尺寸小于文件最小限制时的钩子 |
| onExceedMaxSize | files | 某个文件尺寸大于文件最大限制时的钩子 |
| onChange | files | 选择文件后的钩子 |
| onBegin | file, cancel, extraData | 开始上传单个文件时的钩子，后于 beforeUpload，文件必定会开始上传；参数 cancel 为函数，调用 cancel() 会中止上传 |
| onProgress | file, {percent, total}, extraData | 单个文件上传的进度钩子(上传过程中不断触发) |
| onSuccess | result, file, extraData | 单个文件上传成功时的钩子 |
| onError | err, file, extraData | 单个文件上传错误时的钩子 |