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

一、功能介绍

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

二、功能实现

采用的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 = thislet 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 可以获取到文件二进制内容
headerObjectHTTP 请求 Header, header 中不能设置 Referer。
timeoutNumber超时时间,单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序、支付宝小程序、抖音小程序、快手小程序
formDataObjectHTTP 请求中其他额外的 form data
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

注意

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

files参数说明

files 参数是一个 file 对象的数组,file 对象的结构如下:

参数名类型必填说明
nameStringmultipart 提交时,表单的项目名,默认为 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 = thisuni.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.hqwc.cn/news/411400.html

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

相关文章

【征服redis7】谈谈Redis的RDB持久化方式

从现在开始&#xff0c;我们来探讨redis的一个非常重要的问题——集群&#xff0c;要讨论集群&#xff0c;我们需要先理解redis持久化数据的方法&#xff0c;因为集群本质上就是将一个集群的数据同步到其他机器上。 Redis 6的持久化机制主要有两种&#xff1a;RDB&#xff08;…

【unity】麦克风声音驱动,控制身体做出不同动作

1.在角色对象上挂在animator组件&#xff0c;并将动作控制器与其关联 2.在角色对象上挂在audio source组件。 3.新建voice control脚本&#xff0c;编写代码如下&#xff1a; using System; using System.Collections; using System.Collections.Generic; using UnityEngine;…

鸿蒙开发(四)UIAbility和Page交互

通过上一篇的学习&#xff0c;相信大家对UIAbility已经有了初步的认知。在上篇中&#xff0c;我们最后实现了一个小demo&#xff0c;从一个UIAbility调起了另外一个UIAbility。当时我提到过&#xff0c;暂不实现比如点击EntryAbility中的控件去触发跳转&#xff0c;而是在Entry…

oracle篇—19c新特性自动索引介绍

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

WIndows系统重装、备份与恢复实操问题笔记

一 windows重装 1.1 基本步骤 下载大白菜根据官网使用教程制作启动u盘从MSDN或者微软官网下载Windows镜像根据查询的快捷键进入BIOS系统&#xff0c;设置U盘为第一启动 重装 1.2 Windows 11 激活 微软其实在2023年9月20日的公告中宣布停掉免费升级&#xff0c;数字激活工具…

【MATLAB】 SSA奇异谱分析信号分解算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 1 基本定义 SSA奇异谱分析&#xff08;Singular Spectrum Analysis&#xff09;是一种处理非线性时间序列数据的方法&#xff0c;可以对时间序列进行分析和预测。 它基于构造在时间序列上的特定矩阵的奇异值分解&#…

K8s(二)Pod资源——node调度策略、node亲和性、污点与容忍度

目录 node调度策略nodeName和nodeSelector 指定nodeName 指定nodeSelector node亲和性 node节点亲和性 硬亲和性 软亲和性 污点与容忍度 本文主要介绍了在pod中&#xff0c;与node相关的调度策略&#xff0c;亲和性&#xff0c;污点与容忍度等的内容 node调度策略node…

Android车载系统Car模块架构链路分析

一、模块主要成员 CarServiceHelperService SystemServer 中专门为 AAOS 设立的系统服务&#xff0c;用来管理车机的核心服务 CarService。该系统服务的具体实现在 CarServiceHelperServiceUpdatableImpl CarService Car模块核心服务APP&#xff0c;Android 13版本开始分为…

Kubernetes网络模型概述

Kubernetes网络模型设计的一个基础原则是&#xff1a;每个Pod都拥有一个独立的IP地址&#xff0c;并假定所有Pod都在一个可以直接连通的、扁平的网络空间中。所以不管这些Pod是否运行在同一个Node中&#xff0c;都要求它们可以直接通过对方的IP进行访问。由于Kubernetes的网络模…

【每周AI简讯】GPT-5将有指数级提升,GPT Store正式上线

AI7 - Chat中文版最强人工智能 OpenAI的CEO奥特曼表示GPT-5将有指数级提升 GPT奥特曼参加Y-Combinator W24启动会上表示&#xff0c;我们已经非常接近AGI。GPT-5将具有更好的推理能力、更高的准确性和视频支持。 GPT Store正式上线 OpenAI正式推出GPT store&#xff0c;目前…

HUAWEI华为MateStation S台式机电脑12代PUC-H7621N,H5621N原装出厂Windows11.22H2系统

链接&#xff1a;https://pan.baidu.com/s/1QtjLyGTwMZgYiBO5bUVPYg?pwd8mx0 提取码&#xff1a;8mx0 原厂WIN11系统自带所有驱动、出厂主题壁纸、系统属性专属联机支持标志、Office办公软件、华为电脑管家等预装程序 文件格式&#xff1a;esd/wim/swm 安装方式&#xf…

ES自动补全

安装IK分词器 要实现根据字母做补全&#xff0c;就必须对文档按照拼音分词。在GitHub上恰好有elasticsearch的拼音分词插件。地址&#xff1a;GitHub - medcl/elasticsearch-analysis-pinyin: This Pinyin Analysis plugin is used to do conversion between Chinese characte…