金坛建设局网站,深圳公司网站建设服务为先,不断推进门户网站建设,直缝钢管网站建设目录 基础用法
#上传视频
#文件预览
#隐藏上传按钮
#限制上传数量
#自定义上传样式
API
#Props
#Methods
#Slot
#Events 基础用法
可以通过设置fileList参数(数组#xff0c;元素为对象)#xff0c;显示预置的图片。其中元素的url属性为图片路径
template元素为对象)显示预置的图片。其中元素的url属性为图片路径
templateu-upload:fileListfileList1afterReadafterReaddeletedeletePicname1multiple:maxCount10/u-upload
/templatescriptexport 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}].lengthlists.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#上传视频
通过设置acceptvideo属性将上传改为视频上传。
u-upload:fileListfileList2afterReadafterReaddeletedeletePicname2multiple:maxCount10acceptvideo
/u-upload
!-- data 方法请参考 基本用法 --
data(){return{fileList2: [],}
}#文件预览
通过设置:previewFullImagetrue属性达到文件预览的目的。
u-upload:fileListfileList3afterReadafterReaddeletedeletePicname3multiple:maxCount10:previewFullImagetrue
/u-upload
!-- data 方法请参考 基本用法 --
data(){return{fileList3: [{url: https://cdn.uviewui.com/uview/swiper/1.jpg,}],}
}#隐藏上传按钮
上传数量等于maxCount所规定的数据时隐藏上传按钮。
u-upload:fileListfileList4afterReadafterReaddeletedeletePicname4multiple:maxCount2
/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:fileListfileList5afterReadafterReaddeletedeletePicname5multiple:maxCount3
/u-upload
!-- data 方法请参考 基本用法 --
data(){return{fileList5: [],}
}#自定义上传样式
添加image以自定义上传样式达到身份证银行卡等不同场景需求。
u-upload:fileListfileList6afterReadafterReaddeletedeletePicname6multiple:maxCount1width250height150
image srchttps://cdn.uviewui.com/uview/demo/upload/positive.png modewidthFix stylewidth: 250px;height: 150px;/image
/u-upload
!-- data 方法请参考 基本用法 --
data(){return{fileList6: [],}
}
API
#Props
参数说明类型默认值可选值accept接受的文件类型file只支持H5只有微信小程序才支持把accept配置为all、mediaStringimageall | media | image | file | videocapture图片或视频拾取模式当accept为image类型时设置capture可选额外camera可以直接调起摄像头String | Array[album, camera]-compressed当accept为video时生效是否压缩视频默认为trueBooleantruefalsecamera当accept为video时生效可选值为back或frontStringback-maxDuration当accept为video时生效拍摄视频最长拍摄时间单位秒Number60trueuploadIcon上传区域的图标只能内置图标Stringcamera-fill-uploadIconColor上传区域的图标的颜色String#D3D4D6-useBeforeRead是否启用(显示/隐藏)组件BooleanfalsetruepreviewFullImagepreviewFullImageBooleantruefalsemaxCount最大选择图片的数量String | Number52-disabled是否启用(显示/隐藏)组件BooleanfalsetrueimageMode预览上传的图片时的裁剪模式和image组件mode属性一致StringaspectFill-name标识符可以在回调函数的第二项参数中获取Stringfile-sizeTypeoriginal 原图compressed 压缩图默认二者都有H5无效ArrayString[original, compressed]-multiple是否开启图片多选部分安卓机型不支持Booleanfalsetruedeletable是否显示删除图片的按钮BooleantruefalsemaxSize选择单个文件的最大大小单位B(byte)默认不限制String | NumberNumber.MAX_VALUE-fileList显示已上传的文件列表Array--uploadText上传区域的提示文字String--width内部预览图片区域和选择图片按钮的区域宽度单位rpx不能是百分比或者autoString | Number80-height内部预览图片区域和选择图片按钮的区域高度单位rpx不能是百分比或者autoString | Number80-previewImage是否在上传完成后展示预览图Booleantruefalse
#Methods
此方法如要通过ref手动调用
名称说明afterRead读取后的处理函数beforeRead读取前的处理函数
#Slot
slot中您可以内置任何您所需要的样式。
名称说明-(default)自定义上传样式
#Events
回调参数中的event参数为当前删除元素的所有信息index为当前操作的图片的索引name为删除名称file包含删除的url信息
事件名说明回调参数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 参数 包含indexfilename
