uniapp中uview组件库的丰富Upload 上传上午用法

目录

基础用法

#上传视频

#文件预览

#隐藏上传按钮

#限制上传数量

#自定义上传样式

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}`].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>

#上传视频

  • 通过设置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)Stringimageall | media | image | file | video
capture图片或视频拾取模式,当accept为image类型时设置capture可选额外camera可以直接调起摄像头String | Array['album', 'camera']-
compressed当accept为video时生效,是否压缩视频,默认为trueBooleantruefalse
camera当accept为video时生效,可选值为back或frontStringback-
maxDuration当accept为video时生效,拍摄视频最长拍摄时间,单位秒Number60true
uploadIcon上传区域的图标,只能内置图标Stringcamera-fill-
uploadIconColor上传区域的图标的颜色String#D3D4D6-
useBeforeRead是否启用(显示/隐藏)组件Booleanfalsetrue
previewFullImagepreviewFullImageBooleantruefalse
maxCount最大选择图片的数量String | Number52-
disabled是否启用(显示/隐藏)组件Booleanfalsetrue
imageMode预览上传的图片时的裁剪模式,和image组件mode属性一致StringaspectFill-
name标识符,可以在回调函数的第二项参数中获取Stringfile-
sizeTypeoriginal 原图,compressed 压缩图,默认二者都有,H5无效Array<String>['original', 'compressed']-
multiple是否开启图片多选,部分安卓机型不支持Booleanfalsetrue
deletable是否显示删除图片的按钮Booleantruefalse
maxSize选择单个文件的最大大小,单位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 参数 包含index,file,name

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/227663.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Image】超硬核数学推导——WGAN的先“破”后“立”

GAN的实现 上一篇文章中我们说到了GAN的数学解释 min ⁡ G max ⁡ D V ( D , G ) E x ∼ p data ( x ) [ log ⁡ D ( x ) ] E z ∼ p z ( z ) [ log ⁡ ( 1 − D ( G ( z ) ) ) ] − log ⁡ 4 2 J S D ( p data ∥ p g ) ≥ − log ⁡ 4 , where [ p d a t a p g ] \mi…

Vscode —— 解决Vscode终端无法使用npm的命令的问题

在cmd中可以正常执行npm -v等指令,但是在vs code终端中,无法执行npm -v,node -v等指令 出现报错 解决办法&#x1f447; 方法一&#xff1a;【右键单击Vscode】以【管理员身份运行】&#xff0c;【重启Vscode】 方法二&#xff1a;①【用户变量】的【path】添加npm所在路径的…

使用streampark进行flink on k8s LoadBalancer配置域名访问flink ui

在使用yarn部署flink任务时&#xff0c;yarn自动代理了flink web ui&#xff0c;通过yarn的地址即可访问任务web页面。 k8s模式下想访问flink web ui&#xff0c;要么使用NodePort的方式启动任务&#xff0c;然后通过k8s主机IPNodePort端口来进行访问。但是这种方法&#xff0…

LoongArch指令集-特权指令系统——摘抄自胡伟武体系结构和龙芯架构32位精简版参考手册

例外与中断 1 中断 1.1 中断类型 龙芯架构 32 位精简版下的中断采用线中断的形式。每个处理器核内部可记录 12 个线中断&#xff0c;分别是&#xff1a;1 个核间中断&#xff08;IPI&#xff09;&#xff0c;1 个定时器中断&#xff08;TI&#xff09;&#xff0c;8 个硬中断…

【Kubernetes】kubectl 常用命令

kubectl 常用命令 1.基础命令2.部署命令3.集群管理命令4.故障诊断与调试命令5.高级命令6.设置命令7.其他命令 kubectl 是 Kubernetes 提供的命令行管理工具。通过使用 kubectl&#xff0c;可以管理和操作 Kubernetes。 1.基础命令 命令 说明 create通过文件名或标准输入创建 …

迅软科技助力高科技防泄密:从华为事件中汲取经验教训

近期&#xff0c;涉及华为芯片技术被窃一事引起广泛关注。据报道&#xff0c;华为海思的两个高管张某、刘某离职后成立尊湃通讯&#xff0c;然后以支付高薪、股权支付等方式&#xff0c;诱导多名海思研发人员跳槽其公司&#xff0c;并指使这些人员在离职前通过摘抄、截屏等方式…

centos7安装nginx并安装部署前端

目录&#xff1a; 一、安装nginx第一种方式&#xff08;外网&#xff09;第二种方式&#xff08;内网&#xff09; 二、配置前端项目三、Nginx相关命令 好久不用再次使用生疏&#xff0c;这次记录一下 一、安装nginx 第一种方式&#xff08;外网&#xff09; 1、下载nginx ng…

Servlet入门

目录 1.Servlet介绍 1.1什么是Servlet 1.2Servlet的使用方法 1.3Servlet接口的继承结构 2.Servlet快速入门 2.1创建javaweb项目 2.1.1创建maven工程 2.1.2添加webapp目录 2.2添加依赖 2.3创建servlet实例 2.4配置servlet 2.5设置打包方式 2.6部署web项目 3.servl…

关于蚁剑(AntSword)的溯源反制

中国蚁剑(AntSword) RCE漏洞 此漏洞在AntSword2.7.1版本上修复 &#xff0c;所以适用于AntSword2.7.1以下版本。 下面介绍被低版本蚁剑攻击后如何进行溯源反打 以物理机为攻击机&#xff0c;虚拟机kali模拟受害者&#xff0c;之后使用kali进行溯源反制 物理机内网ip地址&…

Spring Data Redis对象缓存序列化问题

相信在项目中&#xff0c;你一定是经常使用 Redis &#xff0c;那么&#xff0c;你是怎么使用的呢&#xff1f;在使用时&#xff0c;有没有遇到同我一样&#xff0c;对象缓存序列化问题的呢&#xff1f;那么&#xff0c;你又是如何解决的呢&#xff1f; Redis 使用示例 添加依…

24、Qt使用QCustomPlot

一、下载文件 进入官网&#xff0c;选择“Download”、QCustomPlot.tar.gz Qt Plotting Widget QCustomPlot - Download 二、创建项目 创建一个"Qt Widget Application"项目&#xff0c;基类选择“QMainWindow”&#xff0c;把刚才下载的压缩包里的“qcustomplot.…

linux文件夹介绍

在linux内核文件夹下面存在着许多文件夹&#xff0c;那么那些文件夹是什么用处呢&#xff0c;下面将为你介绍。 (1)documentation 这个文件夹下没有内核代码&#xff0c;仅仅有一套实用的文档&#xff0c;但这些文档的质量不一。比如内核文档的文件系统&#xff0c;在该文件夹下…

Redis 快速搭建与使用

文章目录 1. Redis 特性1.1 多种数据类型支持1.2 功能完善1.3 高性能1.4 广泛的编程语言支持1.5 使用简单1.6 活跃性高/版本迭代快1.7 I/O 多路复用模型 2. Redis发展历程3. Redis 安装3.1 源码安装3.1.1 下载源码包3.1.2 解压安装包3.1.3 切换到 Redis 目录3.1.4 编译安装 3.2…

八皇后问题(C语言)

了解题意 在一个8x8的棋盘上放置8个皇后&#xff0c;使得任何两个皇后都不能处于同一行、同一列或同一斜线上。问有多少种方法可以放置这8个皇后&#xff1f; 解决这个问题的目标是找到所有符合要求的皇后摆放方式&#xff0c;通常使用回溯算法来求解。回溯算法会尝试所有可能…

用 Node.js 写一个爬虫

自己设计一个网站&#xff0c;然后去爬取别人家页面的数据来做一个自己的网站。哈哈哈&#xff0c;如果自己写着玩可能没啥事&#xff0c;但如果用这个网站来获利&#xff0c;你可能就要被寄律师函了&#xff0c;毕竟这有点‘刑’。这篇文章呢&#xff0c;就带大家爬取豆瓣TOP2…

STM32 ESP8266 物联网智能温室大棚 源码PCB原理图 设计文档

资料下载: https://download.csdn.net/download/vvoennvv/88680924 一、概述 本系统以STM32F103C8T6单片机为主控芯片&#xff0c;采用相关传感器构建系统硬件电路。其中使用DHT11温湿度传感器对温度和湿度的采集&#xff0c;MQ-7一氧化碳传感器检测CO浓度&#xff0c;GP2Y101…

vscode括号颜色突然变成白色的了,怎么解决

更新版本后发现vscode的各种括号都变成了白色&#xff0c;由于分色括号已经使用习惯&#xff0c;突然变成白色非常不舒服&#xff0c;尝试多次后&#xff0c;为大家提供一下几种解决方式&#xff0c;希望能帮到同样受到此种困惑的你&#xff1a; 第一种&#xff1a; 首先打开…

听GPT 讲Rust源代码--src/tools(36)

File: rust/src/tools/clippy/clippy_lints/src/loops/empty_loop.rs 在Rust源代码中&#xff0c;empty_loop.rs文件位于src/tools/clippy/clippy_lints/src/loops/目录下&#xff0c;它的作用是实现并提供一个名为EMPTY_LOOP的Lint规则。Clippy是一个Rust的静态分析工具&#…

论文阅读<Contrastive Learning-based Robust Object Detection under Smoky Conditions>

论文链接&#xff1a;https://openaccess.thecvf.com/content/CVPR2022W/UG2/papers/Wu_Contrastive_Learning-Based_Robust_Object_Detection_Under_Smoky_Conditions_CVPRW_2022_paper.pdf Abstract 目标检测是指有效地找出图像中感兴趣的目标&#xff0c;然后准确地确定它们…

OCP NVME SSD规范解读-4.NVMe IO命令-1

针对NVMe-IO-1到NVMe-IO-14的解读如下&#xff1a; NVMe-IO-1&#xff1a; 设备应支持所有必需的NVMe I/O命令。这是设备能够进行基本数据读写操作的基础要求。NVMe I/O命令包括读、写、删除、擦除等操作&#xff0c;这些是存储设备的核心功能。 NVMe-IO-2&#xff1a; 设备应…