更新记录
1.0.3(2021-07-29)
1.修改接受上传的文件类型限制
2.修复图片重新上传方法调用失败
1.0.2(2021-07-28)
修复formData传参无效
1.0.1(2021-07-28)
增加图片自定义渲染插槽
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用说明
拷贝该组件到 components 目录下之后
在 script 中引用组件
import hjbUpload from "@/components/hjb-upload/hjb-upload.vue";
export default {
components: { hjbUpload },
};
在 template 中使用组件:
<template>
<hjb-upload
ref="upload"
name="file"
action="/upload"
:headers="headers"
:limit="10"
:file-list="fileList"
:on-change="uploadChange"
>
<!-- 自定义渲染可选 -->
<image slot-scope="{item,index}" :src="item.url" />
</hjb-upload>
</template>
<script>
export default {
data() {
return {
headers: {
token: "xxx",
},
fileList: [{ url: "http://xxx.png" }],
};
},
methods: {
uploadChange(file, fileList) {},
},
};
</script>
组件参数说明
参数 |
说明 |
类型 |
默认值 |
action |
必选参数,上传的地址 |
string |
— |
headers |
设置上传的请求头部 |
object |
— |
multiple |
是否支持多选文件 |
boolean |
false |
formData |
上传时附带的额外参数 |
object |
— |
name |
上传的文件字段名 |
string |
file |
fileType |
接受上传的文件类型,例如: ['png'] |
array |
[] |
on-preview |
点击文件列表中已上传的文件时的钩子 |
function(file) |
— |
on-remove |
文件列表移除文件时的钩子 |
function(file, fileList) |
— |
on-success |
文件上传成功时的钩子 |
function(response, file, fileList) |
— |
on-error |
文件上传失败时的钩子 |
function(err, file, fileList) |
— |
on-progress |
文件上传时的钩子 |
function(event, file, fileList) |
— |
on-change |
文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 |
function(file, fileList) |
— |
before-upload |
上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 |
function(file) |
— |
before-remove |
删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 |
function(file, fileList) |
— |
auto-upload |
是否在选取文件后立即进行上传 |
boolean |
true |
file-list |
上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] |
array |
[] |
http-request |
覆盖默认的上传行为,可以自定义上传的实现 |
function |
— |
disabled |
是否禁用 |
boolean |
false |
limit |
最大允许上传个数 |
number |
10 |