uniapp小程序实现上传图片功能，并显示上传进度

效果图：
在这里插入图片描述
实现方法：

一、通过uni.chooseMedia(OBJECT)方法，拍摄或从手机相册中选择图片或视频。

官方文档链接: https://uniapp.dcloud.net.cn/api/media/video.html#choosemedia
在这里插入图片描述

uni.chooseMedia({
  count: 9,
  mediaType: ['image','video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30,
  camera: 'back',
  success(res) {
    console.log(res.tempFiles)
  }
})

二、使用uni.uploadFile(OBJECT)方法上传文件。

官方文档链接: https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
在这里插入图片描述

uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

var uploadTask = uni.uploadFile({
	url: 'https://www.example.com/upload', //仅为示例，并非真实接口地址。
	complete: ()=> {}
});
uploadTask.abort();

三、使用progress进度条组件，实现上传进度显示。

在这里插入图片描述

三、完整代码。

功能：1、上传图片支持进度显示 2、控制每张图片大小不超过8兆 3、当选择图片超过最大数量时，添加图片按钮控制隐藏

<template>
	<view class="material-box">
		<view class="material-select">
			<view class="material-png" v-for="(item,index) in imageList" :key="index">
				<view class="material-sent" v-if="!item.uploadStatus">
					<progress class="select-tips" :percent="item.schedule" stroke-width="4" activeColor="#B99C65" />
					<view class="tips-text">
						上传进度{{item.schedule}}%
					</view>
				</view>
				<image src="@/qualifyLnvestor/static/close.png" mode="" class="close-png" @click="closeImg(index)">
				</image>
				<image :src="item.tempFilePath" mode="" class="selected-png" v-if="item.type=='image'"></image>
				<view v-else class="selected-name">{{item.name}}</view>
			</view>
			<view class="material-png" @click="selectPicture" v-if="selectimageIsShow">
				<image src="@/qualifyLnvestor/static/picture.png" mode="" class="picture-png"></image>
				<view class="picture-text">
					添加证明
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [], // 反显图片集合
				cusNo: '', // 客户号
				selectimageIsShow: true, // 添加图片功能按钮默认显示
				accessToken: '',
			};
		},
		methods: {
			selectPicture() {
				const that = this;
				// if(this.imageList.length == 15){
				// 	showModal("温馨提示", '最多上传15个文件')
				// }else{
				// 	let counts = (15-this.imageList.length) > 9 ? 9 : (15-this.imageList.length);
				if (this.imageList.length == 5) {
					showModal("温馨提示", '最多上传5个文件')
				} else {
					let counts = (5 - this.imageList.length)
					uni.chooseMedia({
						count: counts,
						mediaType: ['image'],
						sourceType: ['album', 'camera'],
						success: (res) => {
							console.log('选择图片', res)
							let tempFilePaths = res.tempFiles;
							let selectImage = [];
							tempFilePaths.forEach((item) => {
								if (item.size >= 8388608) {
									showModal("温馨提示", '单个文件大小不能超过8M')
								} else {
									selectImage.push({
										type: item.fileType,
										tempFilePath: item.tempFilePath,
										name: new Date().getTime(),
										schedule: 0,
										uploadStatus: false,
									})
								}
							})
							that.imageList = that.imageList.concat(selectImage);
							if (that.imageList.length == 5) {
								that.selectimageIsShow = false
							}
							that.imageList.forEach((item) => {
								if (!item.uploadStatus) {
									const uploadTask = uni.uploadFile({
										url: apiUrl.hotActivity +
										'/quaInv/upload', //上传接口地址
										filePath: item.tempFilePath,
										name: 'fileList',
										header: {
											'content-type': 'multipart/form-data'
										},
										formData: {
											'cusNo': that.cusNo,
											'accessToken': that.accessToken,
										},
										success: (uploadFileRes) => {
											if (uploadFileRes.statusCode == 200) {
												let uploadDate = JSON.parse(uploadFileRes
													.data);
												if (uploadDate.code == 'MOP000000') {
													item.contenidNo = uploadDate.data;
												} else {
													that.selectimageIsShow = true;
													this.imageList = this.imageList.filter(
														item => {
															return item.contenidNo !=
																undefined && item
																.contenidNo == null &&
																item.contenidNo == ''
														});
												}
											}
											console.log(uploadFileRes);
											// item.contenidNo = uploadFileRes.data.
										}
									});

									uploadTask.onProgressUpdate((res) => {
										console.log('上传进度' + res.progress);
										console.log('已经上传的数据长度' + res.totalBytesSent);
										console.log('预期需要上传的数据总长度' + res
											.totalBytesExpectedToSend);
										item.schedule = res.progress;
										if (res.progress == 100) {
											item.uploadStatus = true;
										}
										// 测试条件，取消上传任务。
										if (res.progress > 50000) {
											uploadTask.abort();
										}
									});
								}
							})
						}
					});
				}
			}
		}
	}
</script>
<style lang="scss">
		.material-box {
			width: 686rpx;
			padding: 32rpx;
			background: #fff;
			margin-top: 24rpx;
			margin-left: 32rpx;
			padding-bottom: 32rpx;
			border-radius: 8rpx;

			.item-top {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333;
			}

			.material-item {
				width: 622rpx;
				border-radius: 8rpx;
				background: #f8f8f8;
				padding: 16rpx;
				margin-top: 24rpx;

				.item-list {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 56rpx;
					height: 56rpx;
					color: #B99C65;
				}
			}

			.material-select {
				display: flex;
				flex-wrap: wrap;
				margin-top: 24rpx;

				.material-png {
					width: 191rpx;
					height: 191rpx;
					border-radius: 12rpx;
					border: 2rpx dashed #B99C65;
					margin-right: 8rpx;
					margin-left: 8rpx;
					margin-bottom: 16rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					background: #F8F8F8;

					.material-sent {
						width: 189rpx;
						height: 189rpx;
						background: rgba(245, 245, 245, 0.5);
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;

						.select-tips {
							width: 130rpx;
							height: 10rpx;
							margin-bottom: 12rpx;
						}

						.tips-text {
							font-size: 24rpx;
							color: #B99C65;
						}
					}

					.close-png {
						position: absolute;
						top: 6rpx;
						right: 6rpx;
						width: 40rpx;
						height: 40rpx;
					}

					.selected-png {
						width: 180rpx;
						height: 180rpx;
						border-radius: 12rpx;
					}

					.selected-name {
						width: 180rpx;
						word-break: break-all;
						overflow: hidden;
					}

					.picture-png {
						width: 40rpx;
						height: 32rpx;
						margin-bottom: 8rpx;
					}

					.picture-text {
						font-size: 28rpx;
						height: 40rpx;
						line-height: 40rpx;
						color: #B99C65;
					}
				}
			}
		}	
</style>

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

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

相关文章

Apache-DBUtils

Apache-DBUtils

目录 封装方法 引出dbutils 案例 当关闭connection后&#xff0c;resultset结果集就无法使用了&#xff0c;这就使得resultset不利于数据的管理 封装方法 我们可以将结果集先存储在一个集合中&#xff0c;当connection关闭后&#xff0c;我们可以通过访问集合来访问结果集 …
阅读更多...
7.11 Java方法重写

7.11 Java方法重写

7.11 Java方法重写 这里首先要确定的是重写跟属性没有关系&#xff0c;重写都是方法的重写&#xff0c;与属性无关 带有关键字Static修饰的方法的重写实例 父类实例 package com.baidu.www.oop.demo05;public class B {public static void test(){System.out.println("这…
阅读更多...
C++--红黑树

C++--红黑树

1.什么是红黑树 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出俩倍&#xff0c;因…
阅读更多...
【Java转Go】快速上手学习笔记（二）之基础篇一

【Java转Go】快速上手学习笔记（二）之基础篇一

目录 创建项目数据类型变量常量类型转换计数器键盘交互流程控制代码运算符 创建项目 上篇我们安装好了Go环境&#xff0c;和用IDEA安装Go插件来开发Go项目&#xff1a;【Java转Go】快速上手学习笔记&#xff08;一&#xff09;之环境安装篇 。 这篇我们开始正式学习Go语言。我…
阅读更多...
【新知测评实验室】解谜扫描全能王——“智能高清滤镜”黑科技

【新知测评实验室】解谜扫描全能王——“智能高清滤镜”黑科技

目录 一、“智能高清滤镜” 原理分析1.1、智能扫描引擎AI-Scan功能拆解1.1.1、**图像感知**1.1.2、场景化决策 1.2、版面还原与识别技术分析1.2.1、元素检测和识别1.2.2、元素聚合1.2.3、版面识别 二、深度测评——“智能高清滤镜”功能2.1、图像处理方面2.2、摩尔纹去除方面2.…
阅读更多...
【C++类和对象】类有哪些默认成员函数呢？（下）

【C++类和对象】类有哪些默认成员函数呢？（下）

文章目录 一、类的6个默认成员函数二、日期类的实现2.1 运算符重载部分2.2 日期之间的运算2.3 整体代码1.Date.h部分2. Date.cpp部分 三. const成员函数四. 取地址及const取地址操作符重载扩展内容 总结 ヾ(๑╹◡╹)&#xff89;" 人总要为过去的懒惰而付出代价ヾ(๑╹◡…
阅读更多...
ffmepg滤镜

ffmepg滤镜

代码实现&#xff1a; 1.get_format() 这个是QSV硬件解码时的回调函数&#xff0c;在这里初始化hw_frames_ctx, get_format会在解码时被调用。因此对滤镜的初始化init_filter()应在得到第一帧数据后调用。 2.hw_frames_ctx&#xff0c;需要按照要求把他们传给对应的filter 3.然…
阅读更多...
向量数据库 Milvus Cloud Partition Key：租户数量多，单个租户数据少的三种解决方案

向量数据库 Milvus Cloud Partition Key：租户数量多，单个租户数据少的三种解决方案

三种解决方案 这个问题提出的时候，Milvus 的最新版本是 2.2.8，我们做个角色互换，在当时站在这个用户的角度，留在我们面前的选择有这么几个： 为每个租户创建一个 collection 为每个租户创建一个 partition 创建一个租户名称的标量字段 接下来，我们依次分析下这三种方案的可…
阅读更多...
OPPO A57刷机资源（附简略教程）

OPPO A57刷机资源（附简略教程）

https://www.123pan.com/s/hcAqVv-fpHWd.html提取码:buAp 图中画框的为必须下载的&#xff08;xiaomiflash和twrp必须解压后使用&#xff09; ​ 打开xiaomiflash点击driver点击install&#xff08;就是框住的按钮&#xff09;等待安装完成 ​用数据线将oppo a57与电脑连接&a…
阅读更多...
【数学建模】逻辑回归算法(Logistic Resgression)

【数学建模】逻辑回归算法(Logistic Resgression)

逻辑回归算法 简介逻辑回归与条件概率绘制sigmoid函数 简介 逻辑回归算法是一种简单但功能强大的二元线性分类算法。需要注意的是&#xff0c;尽管"逻辑回归"名字带有“回归”二字&#xff0c;但逻辑回归是一个分类算法&#xff0c;而不是回归算法。 我认为&#xff…
阅读更多...
用easyui DataGrid编辑树形资料

用easyui DataGrid编辑树形资料

easyui显示编辑树形资料有TreeGrid元件&#xff0c;但是这个元件的vue版本和react版本没有分页功能。virtual scroll功能也表现不佳。 我用DataGrid来处理。要解决的问题点&#xff1a; &#xff08;1&#xff09;如何显示成树形。即&#xff0c;子节点如何有缩进。 先计算好…
阅读更多...
一、进入sql环境，以及sql的查询、新建、删除、使用

一、进入sql环境，以及sql的查询、新建、删除、使用

1、进入sql环境 》》》mysql -u root -p 》》》输入密码 2、sql语言的分类 3、注意事项&#xff1a; 4、基础操作&#xff1a; &#xff08;1&#xff09;查询所有数据库&#xff1a; show databases; 运行结果&#xff1a; &#xff08;2&#xff09;创建一个新的数据库&…
阅读更多...
网络通信原理传输层TCP三次建立连接（第四十八课）

网络通信原理传输层TCP三次建立连接（第四十八课）

ACK :确认号 。 是期望收到对方的下一个报文段的数据的第1个字节的序号，即上次已成功接收到的数据字节序号加1。只有ACK标识为1，此字段有效。确认号X+1SEQ：序号字段。 TCP链接中传输的数据流中每个字节都编上一个序号。序号字段的值指的是本报文段所发送的数据的第一个字节的…
阅读更多...
MongoDB 简介

MongoDB 简介

什么是MongoDB ? MongoDB 是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。 在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB 将数据存储为一个…
阅读更多...
从SaaS到RPA，没有真正“完美”的解决方案！

从SaaS到RPA，没有真正“完美”的解决方案！

众所周知&#xff0c;SaaS行业越来越卷&#xff0c;利润也越来越“薄”&#xff0c;这是传统软件厂商的悲哀&#xff0c;也是未来数字化行业不得不面对的冷峻现状之一。 随着基于aPaaS、低代码的解决方案之流行&#xff0c;SaaS行业变得越来越没有技术门槛&#xff0c;IT人员的…
阅读更多...
win10安装mysql和c++读取调用举例

win10安装mysql和c++读取调用举例

一、下载mysql8.rar解压到C盘(也可以解压到其他位置) 在系统环境变量添加JAVA_HOMEC:\myslq8&#xff0c;并在path中添加%JAVA_HOME%\bin; 二、以管理员身份进入命令窗口 三、修改配置文件指定安装路径和数据库的存放路径 四、键入如下命令初始化并启动mysql服务,然后修改登录…
阅读更多...
使用qsqlmysql操作mysql提示Driver not loaded

使用qsqlmysql操作mysql提示Driver not loaded

环境: win10 IDE: qt creator 编译器: mingw32 这里简单的记录下。我遇到的情况是在IDE使用debug和release程序都是运行正常&#xff0c;但是当我编译成发布版本之后。老是提示Driver not load。 这就很奇诡了。 回顾了下编译的时候是需要在使用qt先编译下libqsqlmysql.dll的…
阅读更多...
Android中如何不编译源生模块

Android中如何不编译源生模块

如果想让自己的app 替换系统的app 比如使用闪电浏览器替换系统的Browser 首先把闪电浏览器放到 vendor/rockchip/common/apps Android.mk LOCAL_PATH : $(call my-dir) include $(CLEAR_VARS)LOCAL_MODULE : Lightning LOCAL_SRC_FILES : $(LOCAL_MODULE).apk LOCAL_MODULE_C…
阅读更多...
Eclipse使用插件时提示Plugin Error loading shared libraries

Eclipse使用插件时提示Plugin Error loading shared libraries

项目场景： 使用Eclipse的过程中，依赖openCONFIGURATOR插件进行新建项目时，弹出如下的错误： Plugin Error loading shared libraries 以及具体的信息为： Can’t find dependent libraries 这里我使用的插件为openCONFIGURATOR插件 问题描述 如上场景，提示缺少动态链接库…
阅读更多...
实战篇之基于二进制思想的用户标签系统（Mysql+SpringBoot）

实战篇之基于二进制思想的用户标签系统（Mysql+SpringBoot）

一&#xff1a; 计算机中的二进制 计算机以二进制表示数据&#xff0c;以表示电路中的正反。在二进制下&#xff0c;一个位只有 0 和 1 。逢二进一 位。类似十进制下&#xff0c;一个位只有 0~9 。逢十进一位。 二&#xff1a; 进制常用运算 &#xff08;位运算&#xff09;…
阅读更多...
最新文章

Copyright @ 2022~2023

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