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

news/2024/11/28 8:40:08/

一、功能介绍

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

二、功能实现

采用的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 可以获取到文件二进制内容
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 = 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.ppmy.cn/news/1324936.html

相关文章

小程序中使用微信同声传译插件实现语音识别、语音合成、文本翻译功能----语音识别（一）

小程序中使用微信同声传译插件实现语音识别、语音合成、文本翻译功能----语音识别（一）

官方文档链接&#xff1a;https://mp.weixin.qq.com/wxopen/plugindevdoc?appidwx069ba97219f66d99&token370941954&langzh_CN#- 要使用插件需要先在小程序管理后台的设置->第三方设置->插件管理中添加插件&#xff0c;目前该插件仅认证后的小程序。 语音识别…
阅读更多...
【QT】QThread 成员函数

【QT】QThread 成员函数

Public Functions void QThread::exit(int returnCode 0) 告诉线程的事件循环需要退出&#xff0c;并且返回code 调用此函数后&#xff0c;线程离开事件循环并从对 QEventLoop::exec() 的调用返回。 QEventLoop::exec() 函数返回 returnCode&#xff0c;returnCode 为 0 表示…
阅读更多...
Mysql深度分页优化的一个实践

Mysql深度分页优化的一个实践

问题简述: 最近在工作中遇到了大数据量的查询场景, 日产100w左右明细, 会查询近90天内的数据, 总数据量约1亿, 业务要求支持分页查询与导出. 无论是分页或导出都涉及到深度分页查询, mysql通过limit/offset实现的深度分页查询会存在全表扫描的问题, 比如offset1000w, limit10…
阅读更多...
2023年山东省职业院校技能大赛高职组信息安全管理与评估 模块二（正式赛）

2023年山东省职业院校技能大赛高职组信息安全管理与评估 模块二（正式赛）

2023年山东省职业院校技能大赛高职组信息安全管理与评估 模块二 模块二竞赛项目试题 根据信息安全管理与评估技术文件要求&#xff0c;模块二为网络安全事件响应、数字取证调查和 应用程序安全。本文件为信息安全管理与评估项目竞赛-模块二试题。 介绍 竞赛有固定的开始和结…
阅读更多...
无监督学习 - DBSCAN（Density-Based Spatial Clustering of Applications with Noise）

无监督学习 - DBSCAN（Density-Based Spatial Clustering of Applications with Noise）

什么是机器学习 DBSCAN&#xff08;Density-Based Spatial Clustering of Applications with Noise&#xff09;是一种无监督学习的密度聚类算法&#xff0c;其主要思想是基于数据点的密度来进行聚类。DBSCAN能够发现具有相对高密度的区域&#xff0c;并能够识别低密度区域作为…
阅读更多...
nodejs学习计划--（二）fs文件系统和path模块

nodejs学习计划--（二）fs文件系统和path模块

1. fs模块 fs 全称为 file system &#xff0c;称之为 文件系统 &#xff0c;是 Node.js 中的 内置模块 &#xff0c;可以对计算机中的磁盘进行操 作。 1. 文件写入 文件写入就是将 数据 保存到 文件 中&#xff0c;我们可以使用如下几个方法来实现该效果 |方法|说明| |-|-| |w…
阅读更多...
class_10:this关键字

class_10:this关键字

this关键字是指向调用对象的指针 #include <iostream> #include <iostream> using namespace std;class Car{ public://成员数据string brand; //品牌int year; //年限//构造函数名与类名相同Car(string brand,int year){cout<<"构造函数中&#…
阅读更多...
Ubuntu 安装Python3.8

Ubuntu 安装Python3.8

安装Python3.8 一、安装环境 Ubuntu2004Python2.7 目标是将python版本从 2.7 更新到3.8 二、安装步骤 2.1 下载python3.8安装包 wget https://www.python.org/ftp/python/3.8.0/Python-3.8.0.tar.xz2.2 安装 依次执行如下步骤&#xff1a; tar Jxf Python-3.8.0.tar.xz…
阅读更多...
最新文章

Copyright @ 2022~2023