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) | 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中您可以内置任何您所需要的样式。
名称 | 说明 |
---|---|
-(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 |
相关文章:
uniapp中uview组件库的丰富Upload 上传上午用法
目录 基础用法 #上传视频 #文件预览 #隐藏上传按钮 #限制上传数量 #自定义上传样式 API #Props #Methods #Slot #Events 基础用法 可以通过设置fileList参数(数组,元素为对象),显示预置的图片。其中元素的url属性为图片路径 <template>…...
Unity关于动画混合树(Blend Tree)的使用
在动画与动画的切换过程中,常因为两个动画之间的差距过大,而显得动画的切换很不自然。 这时候就需要动画混合树Blend Tree这个功能。使用混合树可以将多个动画混合在一起,例如在处理角色的移动中,走动画与跑动画切换的时候&#x…...
怎么下载landsat 8影像并在ArcGIS Pro中进行波段组合
Landsat 8(前身为Landsat数据连续性任务,或 LDCM)于2013年2月11日由 Atlas-V火箭从加利福尼亚州范登堡空军基地发射升空,这里为大家介绍一下该数据的下载的方法,希望能对你有所帮助。 注册账号 如果之前已经注册过的…...
编程新手IDE
身为一个前端开发者,我深知一个好的开发环境对于编程体验的重要性。对于新手来说,选择一个合适的IDE(集成开发环境)更是至关重要。一个好的IDE可以提高编程效率,减少错误,让新手更专注于学习编程本身。 今…...
如何将一个JSON字符串解析为JavaScript对象或值
JSON.parse(JSON.stringify(data)) 将后端传入的JSON数据data放入该方法的参数中,返回的结果就是JavaScript对象 比如将后端传入的对象key作为对象,而不是字符串双引号格式 {"path": "/home","name": "home",…...
idea配置docker推送本地镜像到远程私有仓库
目录 1,搭建远程Docker 私有仓库 Docker registry 2,Windows10/11系统上安装Docker Desktop 3,idea 配置远程私有仓库地址 4,idea 配置Docker 5,idea在本地构建镜像 6,推送本地Docker镜像到远程 Dock…...
Spring Boot学习随笔- 集成MyBatis-Plus(二)条件查询QueryWrapper、聚合函数的使用、Lambda条件查询
学习视频:【编程不良人】Mybatis-Plus整合SpringBoot实战教程,提高的你开发效率,后端人员必备! 查询方法详解 普通查询 // 根据主键id去查询单个结果的。 Test public void selectById() {User user userMapper.selectById(1739970502337392641L);System.out.print…...
十二、K8S之污点和容忍
污点和容忍 一、概念 k8s 集群中可能管理着非常庞大的服务器,这些服务器可能是各种各样不同类型的,比如机房、地理位置、配置等,有些是计算型节点,有些是存储型节点,此时我们希望能更好的将 pod 调度到与之需求更匹配…...
llvm后端之指令选择源码分析
llvm后端之指令选择源码分析 引言1 主要流程1.1 参数降级1.2 构建DAG1.3 类型合法化1.4 向量合法化1.5 DAG合法化1.6 DAG合并 2 目标实现2.1 TargetLowering2.2 SelectionDAGISel 引言 llvm后端指令选择主要是class SelectionDAGISel的子类实现。整个过程将llvm IR转为有向无环…...
【消息中间件】Rabbitmq消息可靠性、持久化机制、各种消费
原文作者:我辈李想 版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。 文章目录 前言一、常见用法1.消息可靠性2.持久化机制3.消息积压批量消费:增加 prefetch 的数量,提高单次连接的消息数并发消费:…...
aws-sdk-cpp通过bazel构建的S3_client轮子
感觉时间过得很快,又是很久没有更新了 哎,主要原因还是很久都没有学什么东西了,进入社会后不知不觉间倦怠了许多 没什么办法,上班了之后做的很多东西都是调用api,越来越像一个工具人了,虽然说本身也大差不…...
关于WPF MVVM 的详细使用过程以及注意的问题
WPF MVVM 是一种常用的设计模式,在 WPF 应用程序中使用它可以更好地分离界面逻辑和业务逻辑,并且更容易进行单元测试和重构。下面是深入理解 WPF MVVM 的详细使用过程以及注意的问题。 一、MVVM 的基本概念 MVVM 是 Model-View-ViewModel 的缩写&#…...
计算机视觉 全教程目录
1、OpenCV 图像处理框架 实战系列 总目录 OpenCV 图像处理框架 实战系列 总目录 2、现代卷积网络实战系列 总目录 现代卷积网络实战系列 总目录 3、YOLO 物体检测 系列教程 总目录 YOLO 物体检测 系列教程 总目录 4、图像分割实战-系列教程 总目录 图像分割实战-系列教程 总目录…...
油猴脚本开发,之如何添加html和css
简介 油猴是一个脚本管理器,让我们能够方便的使用js脚本,以实现对页面内容的修改、功能增强或其他定制化操作。 常见脚本管理器 Tampermonkey 应该是各位见得最多的也是最知名的,好用又稳定,多浏览器支持Greasemonkey 用户脚本始祖&#x…...
【MATLAB】BiGRU神经网络时序预测算法
有意向获取代码,请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 BiGRU神经网络时序预测算法是一种基于双向门控循环单元(GRU)的多变量时间序列预测方法。该方法结合了双向模型和门控机制,旨在有效地捕捉时间序列数据中…...
57.0/初识 PhotoShopCS4(详细版)
目录 57.1 PhotoShop 概要 57.2.1 像素和分辨率 57.2.2 色彩模式 57.2.3 位图和矢量图 57.3 PhotoShop 基本操作 57.3.1 PhotoShop 界面的认识 57.3.2 PhotoShop 基本界面工具 57.3.3 移动选择工具(V) 57.3.4 选框工具(M)编辑 编辑57.3.5 套索工具(L) 57.3…...
[C#]opencvsharp进行图像拼接普通拼接stitch算法拼接
介绍: opencvsharp进行图像拼一般有2种方式:一种是传统方法将2个图片上下或者左右拼接,还有一个方法就是融合拼接,stitch拼接就是一种非常好的算法。opencv里面已经有stitch拼接算法因此我们很容易进行拼接。 效果: …...
《妙趣横生的算法》(C语言实现)-第10章算法设计与数据结构面试题精粹
【10-1】输入一个字符串并将它输出,以ctrlz组合键表示输入完毕,要求将输入的字符串中多于1个的连续空格符合并为1个。 //10-1 2023年12月30日17点11分-17点18分 # include <stdio.h> int main() {char c;c getchar();//scanf("%c", &a…...
(JAVA)-(网络编程)-初始网络编程
网络编程就是在通信协议下,不同的计算机上运行的程序,进行的数据传输。 讲的通俗一点,就是以前我们写的代码是单机版的,网络编程就是联机版的。 应用场景:即时通信,网游对战,金融证券…...
Observer观察者模式(组件协作)
观察者模式(组件协作) 链接:观察者模式实例代码 解析 目的 在软件构建过程中,我们需要为某些对象建立一种“通知依赖关系” ——一个对象(目标对象)的状态发生改变,所有的依赖对象࿰…...
数据挖掘 聚类度量
格式化之前的代码: import numpy as np#计算 import pandas as pd#处理结构化表格 import matplotlib.pyplot as plt#绘制图表和可视化数据的函数,通常与numpy和pandas一起使用。 from sklearn import metrics#聚类算法的评估指标。 from sklearn.clust…...
[Angular] 笔记 24:ngContainer vs. ngTemplate vs. ngContent
请说明 Angular 中 ngContainer, ngTemplate 和 ngContent 这三者之间的区别。 chatgpt 回答: 这三个在 Angular 中的概念是关于处理和组织视图的。 1. ngContainer: ngContainer 是一个虚拟的 HTML 容器,它本身不会在最终渲染…...
❀My排序算法学习之插入排序❀
目录 插入排序(Insertion Sort):) 一、定义 二、基本思想 三、示例 时间复杂度 空间复杂度 bash C++ 四、稳定性分析...
【算法题】30. 串联所有单词的子串
题目 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如,如果 words ["ab","cd","ef"], 那么 "…...
SAP-FI模块 处理自动生成会计凭证增强
ENHANCEMENT 2 ZEHENC_SAPMF05A. "active version * FI 20221215:固定资产业务过渡科目摘要增强功能 WAIT UP TO 1 SECONDS.READ TABLE xbseg WITH KEY hkont 1601990001. IF sy-subrc 0.DATA: lt_bkdf TYPE TABLE OF bkdf,lt_bkpf TYPE TABLE OF bkpf,…...
Shell脚本-bin/bash: 解释器错误: 没有那个文件或目录-完整路径执行-“/”引发的脑裂
引起该不适的一种可能以及解决方案,网上较多,比如: 但按以上方式操作,并经过查看,发现仍然未能解决问题。 因为两种方式执行,有一种能成功,有一种不能,刚开始未怀疑是文件问题&…...
React MUI(版本v5.15.2)详细使用
使用React MUI(版本v5.15.2)的详细示例。请注意,由于版本可能会有所不同,因此建议您查阅官方文档以获取最新的信息和示例。但是,我将根据我的知识库为您提供一些基本示例。 首先,确保您已经按照之前的说明…...
用CSS中的动画效果做一个转动的表
<!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title></title><style>*{margin:0;padding:0;} /*制作表的样式*/.clock{width: 500px;height: 500px;margin:0 auto;margin-top:100px;border-rad…...
【linux】Linux管道的原理与使用场景
Linux管道是Linux命令行界面中一种强大的工具,它允许用户将多个命令链接起来,使得一个命令的输出可以作为另一个命令的输入。这种机制使得我们可以创建复杂的命令链,并在处理数据时提供了极大的灵活性。在本文中,我们将详细介绍Li…...
nvidia jetson xavier nx developer kit version emmc版重装系统
一、将开发板上的外置硬盘取下来格式化 二、在双系统ubuntu安装SDK Manager(.deb文件) SDK Manager | NVIDIA Developer sudo apt install ./sdkmanager_1.9.2-10884_amd64.deb 报错直接百度错误,执行相应命令即可 三、 运行SDK Manager …...
命令模式-实例使用
未使用命令模式的UML 使用命令模式后的UML public abstract class Command {public abstract void execute(); }public class Invoker {private Command command;/*** 为功能键注入命令* param command*/public void setCommand(Command command) {this.command command;}/***…...
将网页变身移动应用:网址封装成App的完全指南
什么是网址封装? 网址封装是一个将你的网站或网页直接嵌入到一个原生应用容器中的过程。用户可以通过下载你的App来访问网站,而无需通过浏览器。这种方式不仅提升了用户体验,还可利用移动设备的功能,如推送通知和硬件集成。 小猪…...
探讨kernel32.dll文件是什么,有效解决kernel32.dll丢失
在使用电脑时,你是否遇到过kernel32.dll丢失的困扰?面对这个问题,我们需要及时去解决kernel32.dll丢失的问题。接下来,我们将深入探讨kernel32.dll的功能以及其在操作系统和应用程序中的具体应用领域,相信这将对你解决…...
LOAM: Lidar Odometry and Mapping in Real-time 论文阅读
论文链接 LOAM: Lidar Odometry and Mapping in Real-time 0. Abstract 提出了一种使用二维激光雷达在6自由度运动中的距离测量进行即时测距和建图的方法 距离测量是在不同的时间接收到的,并且运动估计中的误差可能导致生成的点云的错误配准 本文的方法在不需要高…...
如何使用Docker将.Net6项目部署到Linux服务器(三)
目录 四 安装nginx 4.1 官网下载nginx 4.2 下载解压安装nginx 4.3 进行configure 4.4 执行make 4.5 查看nginx是否安装成功 4.6 nginx的一些常用命令 4.6.1 启动nginx 4.6.2 通过命令查看nginx是否启动成功 4.6.3 关闭Nginx 4.6.5 重启Nginx 4.6.6 杀掉所有Nginx进程 4.…...
《Spring Cloud学习笔记:分布式事务Seata》
解决分布式事务的方案有很多,但实现起来都比较复杂,因此我们一般会使用开源的框架来解决分布式事务问题。 在众多的开源分布式事务框架中,功能最完善、使用最多的就是阿里巴巴在2019年开源的Seata了。 1. 初识Seata Seata是 2019 年 1 月…...
MySQL:权限控制
要授予用户帐户权限,可以用GRANT命令。有撤销用户的权限,可以用REVOKE命令。这里以 MySQl 为例,介绍权限控制实际应用。 GRANT授予权限语法: GRANT privilege,[privilege],.. ON privilege_level TO user [IDENTIFIED BY passwo…...
安全生产知识竞赛活动方案
为进一步普及安全生产法律法规知识,增强安全意识,提高安全技能,经研究,决定举办以“加强安全法治、保障安全生产”为主题的新修订《安全生产法》知识竞赛活动,现将有关事项通知如下: 一、活动时间…...
2023 IoTDB Summit:天谋科技 CTO 乔嘉林《IoTDB 企业版 V1.3: 时序数据管理一站式解决方案》...
12 月 3 日,2023 IoTDB 用户大会在北京成功举行,收获强烈反响。本次峰会汇集了超 20 位大咖嘉宾带来工业互联网行业、技术、应用方向的精彩议题,多位学术泰斗、企业代表、开发者,深度分享了工业物联网时序数据库 IoTDB 的技术创新…...
LangChain.js 实战系列:如何统计大模型使用的 token 使用量和花费
📝 LangChain.js 是一个快速开发大模型应用的框架,它提供了一系列强大的功能和工具,使得开发者能够更加高效地构建复杂的应用程序。LangChain.js 实战系列文章将介绍在实际项目中使用 LangChain.js 时的一些方法和技巧。 统计调用大模型的 to…...
基于多反应堆的高并发服务器【C/C++/Reactor】(中)EventLoop初始化
这个Dispatcher是一个事件分发模型,通过这个模型,就能够检测对应的文件描述符的事件的时候,可以使用epoll/poll/select,前面说过三选一。另外不管是哪一个底层的检测模型,它们都需要使用一个数据块,这个数据块就叫做DispatcherData。除此之外,还有另外一个部分,因为…...
OpenCV(Python)基础—9小时入门版
OpenCV(Python)基础—9小时入门版 # # Author : Mikigo # Time : 2021/12/1 # 一、一句话简介 OpenCV (Open Source Computer Vision Library) 是用 C 语言编写,提供 Python、Java 等语言 API的一个开源计算机视觉库。 二、安装 1、Debian 系使用 apt 安装 O…...
SpringBoot整合Canal
一 linux docker compose版本 1.第一步:基础环境 (1)第1步:安装jak、maven、git、nodejs、npm yum install maven mvn -v 安装maven时会帮安装jdkyum install git git --version 2.27.0yum in…...
用 Python 提取某一个公众号下的所有文章
当我们想要提取某一个公众号下的所有文章时,我们可以借助微信公众平台的开放接口,通过Python编写一个爬虫程序来实现。下面是一个示例代码,以及如何将其转化为一篇详细的微信公众号推文文章。 1. 导入所需库 首先,我们需要导入所…...
鸿蒙4.0实战教学—基础ArkTS(简易视频播放器)
构建主界面 主界面由视频轮播模块和多个视频列表模块组成,效果图如图: VideoData.ets中定义的视频轮播图数组SWIPER_VIDEOS和视频列表图片数组HORIZONTAL_VIDEOS。 // VideoData.ets import { HorizontalVideoItem } from ./HorizontalVideoItem; impo…...
4. 深入 Python 流程控制
4. 深入 Python 流程控制 除了前面介绍的 while 语句,Python 还从其它语言借鉴了一些流程控制功能,并有所改变。 4.1. if 语句 也许最有名的是 if 语句。例如: >>> x int(raw_input("Please enter an integer: "))…...
2000-2022年上市公司股票流动性指标数据/股票流动性Amihud(原始数据+计算代码+计算结果)
2000-2022年上市公司股票流动性指标数据/股票流动性Amihud(原始数据计算代码计算结果) 1、时间:2000-2022年 3、指标:证券代码_没有单位、交易日期_没有单位、日个股交易金额_元、考虑现金红利再投资的日个股回报率_没有单位、交…...
Unity 数据存储PlayerPrefs管理类
Unity 数据存储PlayerPrefs管理类 Unity 数据存储PlayerPrefs管理类实现存取实体类对象存储格式为Json格式Singleton.csInventoryEntity.csDataManager.cs用法如下 Unity 数据存储PlayerPrefs管理类 实现存取实体类对象 存储格式为Json格式 源码如下: Singleton…...
一篇文章学会如何使用 NestJS 过滤器处理系统全局异常情况
前言 在实际的应用开发中,你或许遇到过异常处理机制不统一或错误信息展示混乱的现象。为了解决这些问题,NestJS提供了一个优雅的解决方案:过滤器(Filter)。本文将从实际出发,向你介绍NestJS过滤器的基本概…...
ubuntu 守护进程 supervisor
# 安装 apt-get install supervisor# 检查 echo_supervisord_conf# 查看配置文件所在位置 # [include] # files /etc/supervisor/conf.d/*.conf ps -ef | grep supervisorcd /etc/supervisor/conf.d/lscat frp.conf[program:frp] command /data/work/frp/frpc -c /data/work/…...