小程序中使用上传图片，显示、删除、预览

news2024/11/26 16:42:10

一、功能介绍

需要哦用户点击加号上传图片，并展示所上传图片和能够删除和预览

二、功能实现

采用的uniapp，创建了一个view容器包裹加号图标和展示的图片。

内部展示图片超过9张时候，加号图片隐藏

		<view class="img-list">
            //图片显示列表，循环展示
			<view v-for="(item,index) in pushData.photoList" 
            :key='index' class="img-list-box">
			//图片展示和图片点击唤醒uni的预览删除
            <image :src="item" mode="aspectFit" 
             class="img-item" @tap="imgTypeSelect(item)">
            </image>
			</view>
            //加号添加图，样式自定义就好
			<view v-if="pushData.photoList.length < 9" 
                class="icon-camera" 
                @tap="selectType">
			</view>
		</view>

点击加号

唤起uni的向上弹出操作菜单

uni.showActionSheet(OBJECT)

点击后又使用看图片选择API

从底部向上弹出操作菜单

OBJECT参数说明

参数类型必填说明平台差异说明
titleString否菜单标题App、H5、支付宝小程序、钉钉小程序、微信小程序 3.4.5+（仅真机有效）
alertTextString否警示文案（同菜单标题）微信小程序（仅真机有效）
itemListArray<String>是按钮的文字数组微信、百度、抖音小程序数组长度最大为6个
itemColorHexColor否按钮的文字颜色，字符串格式，默认为"#000000"App-iOS、飞书小程序不支持
popoverObject否大屏设备弹出原生选择按钮框的指示区域，默认居中显示App-iPad（2.6.6+）、H5（2.9.2）
successFunction否接口调用成功的回调函数，详见返回参数说明
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

popover 值说明（仅App生效）

值类型说明
topNumber指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度
leftNumber指示区域坐标
widthNumber指示区域宽度
heightNumber指示区域高度

success返回参数说明

参数类型说明
tapIndexNumber用户点击的按钮，从上到下的顺序，从0开始

示例

uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});

实际代码

selectType() {
	let that = this
	let itemL = ['拍照', '从相册选择照片']
				uni.showActionSheet({
					itemList: itemL,
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								sourceType: ['camera'], // 拍照选择
								success: function(res) {
									res.tempFilePaths.forEach(path => {
										uni.uploadFile({
										    url: '11111111', //后端接口地址
											filePath: path,
											name: 'file',
											formData: {
											
											},
											header: {
												'content-type': 'multipart/form-data',
											},
											success: function(uploadFile) {
												let uploadFiles = JSON.parse(
													uploadFile.data)
												that.pushData.photoList.push(
													uploadFiles.data);
											}
										})
									})
								}
							});
						}
						if (res.tapIndex == 1) {
							uni.chooseImage({
								count: 9 - that.pushData.photoList.length,
								sourceType: ['album'], //从相册选择
								success: function(res) {
									res.tempFilePaths.forEach(path => {
										uni.uploadFile({
											url: 'https:1111111', //后端接口地址
											filePath: path,
											name: 'file',
											formData: {
											},
											header: {
												'content-type': 'multipart/form-data',
											},
											success: function(uploadFile) {
												let uploadFiles = JSON.parse(
													uploadFile.data)
												that.pushData.photoList.push(
													uploadFiles.data);
											}
										})
									})
								}
							});
						}

从本地相册选择图片或使用相机拍照。

uni.chooseImage(OBJECT)

App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera

微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。

OBJECT 参数说明

参数名类型必填说明平台差异说明
countNumber否最多可以选择的图片张数，默认9见下方说明
sizeTypeArray<String>否original 原图，compressed 压缩图，默认二者都有App、微信小程序、支付宝小程序、百度小程序
extensionArray<String>否根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9+)
sourceTypeArray<String>否album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
cropObject否图像裁剪参数，设置后 sizeType 失效App 3.1.19+
successFunction是成功则返回图片的本地文件路径列表 tempFilePaths
failFunction否接口调用失败的回调函数小程序、App
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

crop 参数说明

参数名类型必填说明平台差异说明
qualityNumber否取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。
widthNumber是裁剪的宽度，单位为px，用于计算裁剪宽高比。
heightNumber是裁剪的高度，单位为px，用于计算裁剪宽高比。
resizeBoolean否是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示

success 返回参数说明

参数类型说明
tempFilePathsArray<String>图片的本地文件路径列表
tempFilesArray<Object>、Array<File>图片的本地文件列表，每一项是一个 File 对象

File 对象结构如下

参数类型说明
pathString本地文件路径
sizeNumber本地文件大小，单位：B
nameString包含扩展名的文件名称，仅H5支持
typeString文件类型，仅H5支持

选择图片后继续调用上传接口

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。 如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。另外选择和上传非图像、视频文件参考：uni-app 选择和上传非图像、视频文件 - DCloud问答。

OBJECT 参数说明

参数名类型必填说明平台差异说明
urlString是开发者服务器 url
filesArray是（files和filePath选其一）需要上传的文件列表。使用 files 时，filePath 和 name 不生效。App、H5（ 2.6.15+）
fileTypeString见平台差异说明文件类型，image/video/audio仅支付宝小程序，且必填。
fileFile否要上传的文件对象。仅H5（2.6.15+）支持
filePathString是（files和filePath选其一）要上传文件资源的路径。
nameString是文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
headerObject否HTTP 请求 Header, header 中不能设置 Referer。
timeoutNumber否超时时间，单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序、支付宝小程序、抖音小程序、快手小程序
formDataObject否HTTP 请求中其他额外的 form data
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

注意：

  • App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。

files参数说明

files 参数是一个 file 对象的数组，file 对象的结构如下：

参数名类型必填说明
nameString否multipart 提交时，表单的项目名，默认为 file
fileFile否要上传的文件对象，仅H5（2.6.15+）支持
uriString是文件的本地地址

success 返回参数说明

参数类型说明
dataString开发者服务器返回的数据
statusCodeNumber开发者服务器返回的 HTTP 状态码

 

展示 图片和图片的点击预览删除

将图片上传后，获取到每一张上传的图片返回地址，push到展示的图片列表中

	<image :src="item" mode="aspectFit" 
         class="img-item"
         @tap="imgTypeSelect(item)">
    </image>

点击图片后再次调用向上弹出交互API:uni.showActionSheet

利用点击图片本身的url进行数组寻找，点击预览调用

uni.previewImage(OBJECT)

预览图片。

这里对图片只是一个展示用，所以将存入的图片列表放入就可以预览

其他转发之类的需求可以参考文档中的

longPressActionsObject否长按图片显示操作菜单，如不填默认为保存相册

点击删除按钮，则根据url寻找index进行列表的截取 

// 图片状态选择
imgTypeSelect(item) {
		let that = this
			uni.showActionSheet({
				itemList: ['预览', '删除'],
				success: function(res) {
					if (res.tapIndex == 0) {
						console.log('删除1', that.pushData.photoList);
						uni.previewImage({
							current: item,
							urls: that.pushData.photoList
						})
					}
					if (res.tapIndex == 1) {
						let index = that.pushData.photoList.findIndex(url => 
                          url === item);
						if (index !== -1) {
							that.pushData.photoList.splice(index, 1);
						}
						}
					}
				});
			},

不太美观的css 

添加图标的css是采用背景图，自行替换或使用别的写法

 

.icon-camera {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 210rpx;
		height: 210rpx;
		border-radius: 6rpx;
		margin: 5rpx 0rpx 0rpx 5rpx;
		background-color: #f4f5f7;
		// image{
		// 	width: 100%;
		// 	height: 100%;
		// }
		background: url('../iconadd.png');
		background-size: 100%;
	}

	// 媒体列表
	.img-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.img-list-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.img-item {
		width: 210rpx;
		height: 210rpx;
		margin: 5rpx;
		border-radius: 6rpx
	}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Django实现下载100G的超大CSV文件

Django实现下载100G的超大CSV文件

关注我的公众号「DevOps724」&#xff0c;获取最新的内容分享&#xff0c;带你探索DevOps的无限可能&#xff01;分享最新的行业趋势、深入的技术分析和实用的工具&#xff0c;帮助你掌握自动化、云计算、持续集成和部署等核心概念。 在处理大数据集的时候&#xff0c;我们经常…
阅读更多...
【前沿技术杂谈：智能对话的未来】深入比较ChatGPT与文心一言

【前沿技术杂谈：智能对话的未来】深入比较ChatGPT与文心一言

【前沿技术杂谈&#xff1a;智能对话的未来】深入比较ChatGPT与文心一言 引言主体智能回复语言准确性知识库丰富度 深入分析&#xff1a;ChatGPT与文心一言的技术对比技术架构和算法数据处理和隐私用户界面和体验 应用场景分析未来展望技术进步的趋势潜在的挑战对社会的影响 结…
阅读更多...
[计算机提升] 用户账户控制设置

[计算机提升] 用户账户控制设置

4.11 用户账户控制设置 用户账户控制设置用来选择何时通知使用者关于计算机更改的消息&#xff0c;是一个比较有用的功能。有时候一些流氓软件在获得权限后可以在后台默认修改注册表或者下载或者安装软件&#xff0c;这个对用户而言&#xff0c;体验不是很好&#xff0c;而且更…
阅读更多...
开发实践6_project

开发实践6_project

要求&#xff1a; ① 页面写入超链接&#xff0c;获取所有数据item&#xff0c;显示在另一个页面&#xff0c;1min内&#xff0c;即使数据有变化&#xff0c;页面内容不变&#xff0c;1min后点击超链接可获取最新信息&#xff1b; ② 使用middleware完成用户请求路径判断 &am…
阅读更多...
web前端项目-贪吃蛇小游戏【附源码】

web前端项目-贪吃蛇小游戏【附源码】

web前端项目-贪吃蛇小游戏 【贪吃蛇】是一款经典的小游戏&#xff0c;采用HTML、CSS和JavaScript技术进行开发&#xff0c;玩家通过控制一条蛇在地图上移动&#xff0c;蛇的目的是吃掉地图上的食物&#xff0c;并且让自己变得更长。游戏的核心玩法是控制蛇的移动方向和长度&am…
阅读更多...
C++(12)——string

C++(12)——string

目录 1.insert: 1.1 string& insert (size_t pos, const string& str)&#xff1a; 1.2 string& insert (size_t pos, const char* s)&#xff1a; 1.3 string& insert (size_t pos, const char* s, size_t n)&#xff1a; 1.4 string& insert (…
阅读更多...
【c++】栈(satck)和队列(queue)

【c++】栈(satck)和队列(queue)

目录 一、stack 1.stack的介绍 2.stack的使用 3.stack的模拟实现 二、queue 1.queue的介绍 2.queue的使用 3.queue的模拟实现 三、priority_queue 1.priority_queue的介绍 2.priority_queue的使用 一、stack 1.stack的介绍 &#xff08;1&#xff09;stack是一种容…
阅读更多...
Baichuan2百川模型部署的bug汇总

Baichuan2百川模型部署的bug汇总

1.4bit的量化版本最好不要在Windows系统中运行&#xff0c;大概原因报错原因是bitsandbytes不支持window&#xff0c;bitsandbytes-windows目前仅支持8bit量化。 2. 报错原因是机器没有足够的内存和显存&#xff0c;offload_folder设置一个文件夹来保存那些离线加载到硬盘的权…
阅读更多...
包含广告或宣传性质的内容或参考资料不对应，百度百科词条怎么改

包含广告或宣传性质的内容或参考资料不对应，百度百科词条怎么改

想要修改百度百科词条&#xff0c;却发现在编辑百度百科词条时经常提示“包含广告或宣传性质的内容”&#xff0c;又或者经常遇到“参考资料不对应”的情况&#xff0c;我们该如何正确修改百度百科词条才能推广&#xff0c;洛希爱做百科网为大家分享。 修改百科百度百科词条提示…
阅读更多...
基于SSM的校园闲置物品交易平台设计与实现

基于SSM的校园闲置物品交易平台设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
nexus3 npm-hosted仓库迁移

nexus3 npm-hosted仓库迁移

迁移背景&#xff1a; 从nexus 3.33 升级到 nexus 3.64 过程中&#xff0c;私服 npm-hosted 无法上传。由于这个 npm-hosted 和 npm-proxy 放的同一个 blob存储&#xff0c;无法单独拆除去&#xff0c;所以采用迁移的方式 迁移思路&#xff1a; down下来 npm-hosted 仓库&am…
阅读更多...
e2studio开发三轴加速度计LIS2DW12(3)----检测活动和静止状态

e2studio开发三轴加速度计LIS2DW12(3)----检测活动和静止状态

e2studio开发三轴加速度计LIS2DW12.3--检测活动和静止状态 概述视频教学样品申请源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置UART配置UART属性配置设置e2studio堆栈e2studio的重定向printf设置R_SCI_UART_Open()函数原型回调函数user_uart_callback ()…
阅读更多...
【征服redis8】Redis的AOF持久化

【征服redis8】Redis的AOF持久化

Redis 支持多种持久化方式来保证数据的可靠性和持久性。前面我们介绍了RDB方式。我们我们介绍第二种方式——AOF&#xff08;Append Only File&#xff09;机制是一种常用的持久化方式&#xff0c;它记录了所有对 Redis 数据库进行修改的命令&#xff0c;在 Redis 重启时可以使…
阅读更多...
【Java】HttpServlet类中前后端交互三种方式（query string、form表单、JSON字符串）

【Java】HttpServlet类中前后端交互三种方式（query string、form表单、JSON字符串）

在前后端的交互中&#xff0c;前端通过以下三种方式来与后端进行交互&#x1f31f; ✅query string ✅form表单 ✅JSON字符串 下面我们将书写这三种方式的后端代码并进行讲解 1、Query String QueryString即在url中写入键值对&#xff0c;一般用doGet方法进行交互 代码如下 …
阅读更多...
读AI3.0笔记02_起源

读AI3.0笔记02_起源

1. 起源 1.1. 1955年&#xff0c;28岁的麦卡锡进入了达特茅斯学院的数学系 1.2. 该领域的正式确立可以追溯到1956年由一位名叫约翰麦卡锡的年轻数学家在达特茅斯学院举办的一场小型研讨会 1.2.1. 在1956年&#xff0c;即便是最先进的计算机&#xff0c;其速度也达不到现代智…
阅读更多...
HarmonyOS —— buildMode 设置（对比 Android Build Varient）

HarmonyOS —— buildMode 设置（对比 Android Build Varient）

前言 在安卓中 Build Variant 主要依赖模块&#xff08;module&#xff09;中 build.gradle 的 BuildType 和 ProductFlavor 提供的属性和方法&#xff0c;我们可以使用 Build Type 可以配置不同的构建方式、ProductFlavor 主要用来进行多渠道打包。 在鸿蒙中要做到同样像效果…
阅读更多...
用CHAT分析高校体育智慧教学体系构建与探索研究现状

用CHAT分析高校体育智慧教学体系构建与探索研究现状

CHAT回复&#xff1a;现阶段&#xff0c;高校体育智慧教学体系的构建与探索研究还处于初级阶段&#xff0c;但全球数字化转型大潮的推动下&#xff0c;一些较为前沿的研究和实践已经开始出现&#xff1a; 1.教学平台的建设&#xff1a;很多高校已经开始尝试使用在线教育平台进行…
阅读更多...
web蓝桥杯真题--9、水果拼盘

web蓝桥杯真题--9、水果拼盘

介绍 目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案&#xff0c;本题可以使用 Flex 属性快速完成布局。 准备 开始答题前&#xff0c;需要先打开本题的项目代码文件夹&#xff0c;目录结构如下&#xff1a; ├── css │ └── style.css ├── im…
阅读更多...
【计算机图形学】习题课：Viewing

【计算机图形学】习题课：Viewing

【计算机图形学】Viewing 部分问题与解答 CS100433 Computer Graphics Assignment 21 Proof the composed transformations defined in global coordinate frame is equivalent to the composed transformations defined in local coordinate frame but in different composing…
阅读更多...
2024年腾讯云轻量服务器和CVM云服务器性能如何？

2024年腾讯云轻量服务器和CVM云服务器性能如何？

腾讯云轻量服务器和云服务器有什么区别&#xff1f;为什么轻量应用服务器价格便宜&#xff1f;是因为轻量服务器CPU内存性能比云服务器CVM性能差吗&#xff1f;轻量应用服务器适合中小企业或个人开发者搭建企业官网、博客论坛、微信小程序或开发测试环境&#xff0c;云服务器CV…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023