# Upload 上传
该组件用于上传图片、视频等文件场景。
一般用于表单处的情况较多,可以配合表单使用,具体案例参考:实战案例-配合uv-upload上传进行验证-4 (opens new window)
# 平台兼容性
App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ |
# 基础用法
可以通过设置fileList
参数(数组,元素为对象),显示预置的图片。其中元素的url
属性为图片路径
<template>
<uv-upload
:fileList="fileList1"
name="1"
multiple
:maxCount="10"
@afterRead="afterRead"
@delete="deletePic"
></uv-upload>
</template>
<script>
export default {
data() {
return {
fileList1: []
}
},
methods: {
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
}
}
}
</script>
# 上传视频
通过设置accept='video'
属性,将上传改为视频上传。
<template>
<uv-upload :fileList="[]" name="2" multiple :maxCount="10" accept="video"></uv-upload>
</template>
# 文件预览
通过设置:previewFullImage="true"'
属性,达到文件预览的目的。
<template>
<uv-upload :fileList="fileList" name="3" multiple :maxCount="10" :previewFullImage="true"></uv-upload>
</template>
<script>
export default {
data() {
return {
fileList: [{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
}]
}
}
}
</script>
# 隐藏上传按钮 / 限制上传数量
上传数量等于maxCount
所规定的数据时,隐藏上传按钮。
<template>
<uv-upload :fileList="fileList" name="3" :maxCount="1" multiple :previewFullImage="true"></uv-upload>
</template>
<script>
export default {
data() {
return {
fileList: [{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
},{
url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'
}]
}
}
}
</script>
# 自定义上传样式
添加image
以自定义上传样式,达到身份证,银行卡等不同场景需求。
<template>
<uv-upload
:fileList="[]"
name="6"
multiple
:maxCount="1"
width="250"
height="150">
<image
src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
mode="widthFix"
style="width: 250px;height: 150px;"
></image>
</uv-upload>
</template>
# 完整示例
# API
# Upload Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
fileList | 显示已上传的文件列表,列表中具体参数参考FileList Options | Array | - | - |
accept | 接受的文件类型,file 只支持H5 (只有微信小程序才支持把accept配置为all、media) | String | image | all | media | image | file | video |
capture | 图片或视频拾取模式,当accept为image类型时设置capture可选额外camera可以直接调起摄像头 | String | Array | ['album', 'camera'] | - |
compressed | 当accept为video时生效,是否压缩视频,默认为true | Boolean | true | true | false |
camera | 当accept为video时生效,可选值为back或front | String | back | - |
maxDuration | 当accept为video时生效,拍摄视频最长拍摄时间,单位秒 | Number | 60 | true | false |
uploadIcon | 上传区域的图标,只能内置图标 | String | camera-fill | - |
uploadIconColor | 上传区域的图标的颜色 | String | #D3D4D6 | - |
useBeforeRead | 是否开启读取前的处理函数功能,使用@beforeRead必须设置为true | Boolean | false | true | false |
previewFullImage | 是否开启图片预览功能 | Boolean | true | true | false |
previewFullVideo | 是否开启视频预览功能 | Boolean | true | true | false |
maxCount | 最大选择图片的数量 | String | Number | 52 | - |
disabled | 是否启用(显示/隐藏)组件 | Boolean | false | true | false |
imageMode | 预览上传的图片时的裁剪模式,和image组件mode属性一致 | String | aspectFill | - |
name | 标识符,可以在回调函数的第二项参数中获取 | String | file | - |
sizeType | original 原图,compressed 压缩图,默认二者都有,H5无效 | Array<String> | ['original', 'compressed'] | - |
multiple | 是否开启图片多选,部分安卓机型不支持 | Boolean | false | true | false |
deletable | 是否显示删除按钮 | Boolean | true | true | false |
maxSize | 选择单个文件的最大大小,单位B(byte),默认不限制 | String | Number | Number.MAX_VALUE | - |
uploadText | 上传区域的提示文字 | String | - | - |
width | 内部预览图片区域和选择图片按钮的区域宽度,单位rpx,不能是百分比,或者auto | String | Number | 80 | - |
height | 内部预览图片区域和选择图片按钮的区域高度,单位rpx,不能是百分比,或者auto | String | Number | 80 | - |
previewImage | 是否在上传完成后展示预览图 | Boolean | true | true | false |
customStyle | 自定义外部样式 | Object | - | - |
# FileList Options
属性名 | 说明 |
---|---|
status | 上传状态,uploading - 上传中 success - 上传成功 failed - 上传失败 |
message | 提示文本 |
url | 图片地址 |
# Upload Methods
此方法如要通过ref手动调用
名称 | 说明 |
---|---|
beforeRead | 读取前的处理函数 |
afterRead | 读取后的处理函数 |
# Upload Events
回调参数中的event
参数,为当前删除元素的所有信息,index
为当前操作的图片的索引,name
为删除名称,file
包含删除的url信息
事件名 | 说明 | 回调参数 |
---|---|---|
@beforeRead | 读取前的处理函数,使用之前必须设置 useBeforeRead 为 true | (file, lists, name),错误信息 |
@afterRead | 读取后的处理函数 | (file, lists, name),错误信息 |
@oversize | 图片大小超出最大允许大小 | (file, lists, name), name为通过props 传递的index 参数 |
@clickPreview | 全屏预览图片时触发 | e={deletable,index,isImage,isVideo,name,url} 是否展示删除按钮,索引,是否是图片,是否是视频,通过 props 传递的name,文件地址 |
@delete | 删除图片 | e={file,index,name},文件,索引,通过 props 传递的name |
# Upload Slots
slot中您可以内置任何您所需要的样式。
名称 | 说明 |
---|---|
-(default) | 自定义上传样式 |