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}`].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）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.mfbz.cn/a/280611.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

nodejs+vue+微信小程序＋python＋PHP特困救助供养信息管理系统-计算机毕业设计推荐

nodejs+vue+微信小程序＋python＋PHP特困救助供养信息管理系统-计算机毕业设计推荐

通过走访某特困救助供养机构实际情况&#xff0c;整理特困救助供养机构管理的业务流程&#xff0c;分析当前特困救助供养机构管理存在的各种问题&#xff0c;利用软件开发思想对特困救助供养机构特困救助供养机构管理进行系统设计分析。通过服务端程序框架进行设计&#xff0c;…
阅读更多...
Docker学习（一）

Docker学习（一）

注&#xff1a;此为笔者学习狂神说Docker的笔记&#xff0c;其中包含个人的笔记和理解&#xff0c;仅做学习笔记之用&#xff0c;更多详细资讯请出门左拐B站&#xff1a;狂神说!!! Docker 一、Docker入门 1. Docker 为什么会出现 2.Docker 文档地址: https://docs.docker.co…
阅读更多...
计算机网络-动态路由

计算机网络-动态路由

网络层协议&#xff1a;ip&#xff0c;ospf&#xff0c;rip&#xff0c;icmp共同组成网络层体系 ospf用于自治系统内部。 一个路由器或者网关需要能够支持多个不同的路由协议&#xff0c;以适应不同的网络环境。特别是在连接不同自治系统的边缘路由器或边界网关的情况下&#…
阅读更多...
深度学习-数据基本使用

深度学习-数据基本使用

数据使用 文章目录 数据使用一、数据的获取1、图片爬虫工具2、视频爬虫工具3、复杂的爬虫工具(flickr)4、按照用户的ID来爬取图片5、对一些特定的网站进行爬&#xff08;摄影网站&#xff09;(图虫、500px&#xff0c;花瓣网等等)6、爬虫合集 二、数据整理1、数据检查与归一化2…
阅读更多...
Grafana监控数据可视化

Grafana监控数据可视化

Grafana 是一个可视化面板&#xff0c;有着非常漂亮的图表和布局展示&#xff0c;功能齐全的度量仪表盘和图形编辑器&#xff0c;支持 Graphite、zabbix、InfluxDB、Prometheus、OpenTSDB、Elasticsearch 等作为数据源&#xff0c;比 Prometheus 自带的图表展示功能强大太多&am…
阅读更多...
K8S容器的一则故障记录

K8S容器的一则故障记录

一、故障现象 XXX反馈说某某业务服务异常&#xff0c;无法启动&#xff0c;需要进行协助排查。经常会接到这样一个需求&#xff0c;一开始无法清楚知道具体什么问题&#xff0c;需要跟一线运维人员详细做沟通&#xff0c;了解故障问题的细节。 根据一线运维人员的反馈&#xff…
阅读更多...
unity随笔- 2D动画制作animation

unity随笔- 2D动画制作animation

1.前提&#xff1a;将连续的动作图片制为图集。 2.在Hierarchy中选中含图集的sprites对象。 3.打开animator组件&#xff0c;点击create创建动画组件 4.添加property选择sprite 5.选择图集需要的部分加入animation。&#xff08;animation使用见animator&#xff09;
阅读更多...
Dragonfly-SM X9H核心板 SM6700Q PMIC供电配置烧录介绍

Dragonfly-SM X9H核心板 SM6700Q PMIC供电配置烧录介绍

一、概述 核心板采用 1 片芯迈 SM6700Q PMIC 芯片搭配 3 片 MPQ8861 DCDC 电源芯片和 2 片安森美 LDO&#xff0c;型号分别 NCV8164ASN180T1G 和 NCV8130BMX080TCG 为系统供电。 二、核心板供电框图 系统供电主要是 MCU 的 RTC 域、安全域、应用域的供电&#xff0c;其中 RTC 域…
阅读更多...
攻防世界easyphp解题

攻防世界easyphp解题

攻防世界easyphp解题 <?php highlight_file(__FILE__); $key1 0; $key2 0;$a $_GET[a]; $b $_GET[b];if(isset($a) && intval($a) > 6000000 && strlen($a) < 3){if(isset($b) && 8b184b substr(md5($b),-6,6)){$key1 1;}else{die(&q…
阅读更多...
【Vue2+3入门到实战】（15）VUE路由入门声明式导航的基本使用与详细代码示例

【Vue2+3入门到实战】（15）VUE路由入门声明式导航的基本使用与详细代码示例

目录 一、声明式导航-导航链接1.需求2.解决方案3.通过router-link自带的两个样式进行高亮4.总结 二、声明式导航-两个类名1.router-link-active2.router-link-exact-active3.在地址栏中输入二级路由查看类名的添加4.总结 三、声明式导航-自定义类名&#xff08;了解&#xff09…
阅读更多...
【华为机试】2023年真题B卷（python）-解密犯罪时间

【华为机试】2023年真题B卷（python）-解密犯罪时间

一、题目 题目描述&#xff1a; 警察在侦破一个案件时&#xff0c;得到了线人给出的可能犯罪时间&#xff0c;形如 “HH:MM” 表示的时刻。 根据警察和线人的约定&#xff0c;为了隐蔽&#xff0c;该时间是修改过的&#xff0c;解密规则为&#xff1a; 利用当前出现过的数字&am…
阅读更多...
大创项目推荐 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

大创项目推荐 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…
阅读更多...
基于轻量级GhostNet模型开发构建生活场景下生活垃圾图像识别系统

基于轻量级GhostNet模型开发构建生活场景下生活垃圾图像识别系统

轻量级识别模型在我们前面的博文中已经有过很多实践了&#xff0c;感兴趣的话可以自行移步阅读&#xff1a; 《移动端轻量级模型开发谁更胜一筹&#xff0c;efficientnet、mobilenetv2、mobilenetv3、ghostnet、mnasnet、shufflenetv2驾驶危险行为识别模型对比开发测试》 《基…
阅读更多...
论文阅读＜Contrastive Learning-based Robust Object Detection under Smoky Conditions＞

论文阅读＜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;然后准确地确定它们…
阅读更多...
阶段性复习（三）

阶段性复习（三）

if后面是赋值符&#xff0c;所以最后的值是a for&#xff08;&#xff1b; &#xff1b;&#xff09;是死循环 大小写转换 在这道题中&#xff0c;通过分析可知&#xff0c;在小写转换大写的过程中&#xff0c;需要满足的条件是word0&#xff0c;同时是小写&#xff0c;而在第…
阅读更多...
UV胶有缺点吗？

UV胶有缺点吗？

UV胶具有许多优势&#xff0c;有什么缺点&#xff1a; 感光性 UV胶的固化是通过紫外光照射完成的&#xff0c;因此需要确保所有焊点都能被充分照射到。 2.固化深度 UV胶的紫外线透过深度有限&#xff0c;如果需要厚度过大&#xff0c;需要分多层次涂覆后再固化。 3&#xf…
阅读更多...
【GOLANG】使用插件 Goanno 的方式来对方法、接口、结构体注释模板配置

【GOLANG】使用插件 Goanno 的方式来对方法、接口、结构体注释模板配置

直接 使用插件 Goanno 的方式来对方法、接口、结构体注释模板配置 1、简单安装 Goanno 插件 File->Settings->Plugins , 搜索 Goanno Normal Method 配置内容如下&#xff1a; // Title ${function_name} // Description ${todo} // Author mumu ${date} ${time} // Par…
阅读更多...
Vue常见面试问答

Vue常见面试问答

vue响应式数据 vue2 Vue2 的对象数据是通过 Object.defineProperty 对每个属性进行监听&#xff0c;当对属性进行读取的时候&#xff0c;就会触发 getter&#xff0c;对属性进行设置的时候&#xff0c;就会触发 setter。 /** * 这里的函数 defineReactive 用来对 Object.def…
阅读更多...
Zookeeper无法启动，报“Unable to load database on disk”

Zookeeper无法启动，报“Unable to load database on disk”

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 问题描述&#xff1a; 测试环境部署zookeeper的服务器磁盘满了&#xff0c;引起服务异常&#xff0c;将zookeeper进程杀掉之后&…
阅读更多...
vscode软件安装步骤

vscode软件安装步骤

目录 一、下载软件安装包 二、运行安装包后 一、下载软件安装包 打开vscode官方网址&#xff0c;找到下载界面 链接如下&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 我是windows电脑&#xff0c;各位小伙伴自己选择合适的版本&#xff0c;点击下载按钮…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站