目录
基础用法
#上传视频
#文件预览
#隐藏上传按钮
#限制上传数量
#自定义上传样式
API
#Props
#Methods
#Slot
#Events
基础用法
- 可以通过设置
fileList参数(数组，元素为对象)，显示预置的图片。其中元素的url属性为图片路径
<template>
<u-upload
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="10"
></u-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'属性，将上传改为视频上传。
<u-upload
:fileList="fileList2"
@afterRead="afterRead"
@delete="deletePic"
name="2"
multiple
:maxCount="10"
accept="video"
></u-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList2: [],
}
}
#文件预览
- 通过设置
:previewFullImage="true"'属性，达到文件预览的目的。
<u-upload
:fileList="fileList3"
@afterRead="afterRead"
@delete="deletePic"
name="3"
multiple
:maxCount="10"
:previewFullImage="true"
></u-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList3: [{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
}],
}
}
#隐藏上传按钮
- 上传数量等于
maxCount所规定的数据时，隐藏上传按钮。
<u-upload
:fileList="fileList4"
@afterRead="afterRead"
@delete="deletePic"
name="4"
multiple
:maxCount="2"
></u-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList4: [{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
}
],
}
}
#限制上传数量
- 同上，规定
maxCount的数据时。
<u-upload
:fileList="fileList5"
@afterRead="afterRead"
@delete="deletePic"
name="5"
multiple
:maxCount="3"
></u-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList5: [],
}
}
#自定义上传样式
- 添加
image以自定义上传样式，达到身份证，银行卡等不同场景需求。
<u-upload
:fileList="fileList6"
@afterRead="afterRead"
@delete="deletePic"
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>
</u-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList6: [],
}
}API
#Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| 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 | false |
| camera | 当accept为video时生效，可选值为back或front | String | back | - |
| maxDuration | 当accept为video时生效，拍摄视频最长拍摄时间，单位秒 | Number | 60 | true |
| uploadIcon | 上传区域的图标，只能内置图标 | String | camera-fill | - |
| uploadIconColor | 上传区域的图标的颜色 | String | #D3D4D6 | - |
| useBeforeRead | 是否启用(显示/隐藏)组件 | Boolean | false | true |
| previewFullImage | previewFullImage | Boolean | true | false |
| maxCount | 最大选择图片的数量 | String | Number | 52 | - |
| disabled | 是否启用(显示/隐藏)组件 | Boolean | false | true |
| imageMode | 预览上传的图片时的裁剪模式，和image组件mode属性一致 | String | aspectFill | - |
| name | 标识符，可以在回调函数的第二项参数中获取 | String | file | - |
| sizeType | original 原图，compressed 压缩图，默认二者都有，H5无效 | Array<String> | ['original', 'compressed'] | - |
| multiple | 是否开启图片多选，部分安卓机型不支持 | Boolean | false | true |
| deletable | 是否显示删除图片的按钮 | Boolean | true | false |
| maxSize | 选择单个文件的最大大小，单位B(byte)，默认不限制 | String | Number | Number.MAX_VALUE | - |
| fileList | 显示已上传的文件列表 | Array | - | - |
| uploadText | 上传区域的提示文字 | String | - | - |
| width | 内部预览图片区域和选择图片按钮的区域宽度，单位rpx，不能是百分比，或者auto
|
String | Number | 80 | - |
| height | 内部预览图片区域和选择图片按钮的区域高度，单位rpx，不能是百分比，或者auto
|
String | Number | 80 | - |
| previewImage | 是否在上传完成后展示预览图 | Boolean | true | false |
#Methods
此方法如要通过ref手动调用
| 名称 | 说明 |
|---|---|
| afterRead | 读取后的处理函数 |
| beforeRead | 读取前的处理函数 |
#Slot
slot中您可以内置任何您所需要的样式。文章来源：https://www.toymoban.com/news/detail-767129.html
| 名称 | 说明 |
|---|---|
| -(default) | 自定义上传样式 |
#Events
回调参数中的event参数，为当前删除元素的所有信息，index为当前操作的图片的索引，name为删除名称，file包含删除的url信息文章来源地址https://www.toymoban.com/news/detail-767129.html
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| afterRead | 读取后的处理函数 | (file, lists, name)，错误信息 |
| beforeRead | 读取前的处理函数 | (file, lists, name)，错误信息 |
| oversize | 图片大小超出最大允许大小 | (file, lists, name), name为通过props传递的index参数 |
| clickPreview | 全屏预览图片时触发 | (url, lists, name)，url为当前选中的图片地址，index为通过props传递的index参数 |
| delete | 删除图片 | 传递index 回调 event 参数 包含index，file，name
|
到了这里，关于uniapp中uview组件库的丰富Upload 上传上午用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
