uniapp图片上传预览uni.chooseImage、uni.previewImage

server/2024/12/2 13:49:26/

文章目录

  • 1.上传图片
  • 2.预览图片

1.上传图片

uni.chooseImage(OBJECT)

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

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

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

OBJECT 参数说明

参数名类型必填说明平台差异说明
countNumber最多可以选择的图片张数,默认9见下方说明
sizeTypeArrayoriginal 原图,compressed 压缩图,默认二者都有App、微信小程序、支付宝小程序、百度小程序
extensionArray根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9+)
sourceTypeArrayalbum 从相册选图,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时不显示

Tips

  • count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量。并且,在实际的手机浏览器很少有能够支持多选的。
  • sourceType 值在 H5 平台根据浏览器的不同而表现不同,一般不可限制仅使用相册,部分浏览器也无法限制是否使用相机。
  • 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限https://uniapp.dcloud.io/api/other/authorize
  • App端如需选择非媒体文件,可在插件市场搜索文件选择,其中Android端可以使用Native.js,无需原生插件,而iOS端需要原生插件。
  • 选择照片大多为了上传,uni ui封装了更完善的uni-file-picker组件,文件选择、上传到uniCloud的免费存储和cdn中,一站式集成。强烈推荐使用。
  • App上有时会遇到图片旋转90度问题,插件市场有解决方案:图片旋转
  • 微信小程序在2023年10月17日之后,使用API需要配置隐私协议
  • 在部分低端机如红米上拍照闪退,拍照调用的是系统相机,当系统内存不足,rom为了给相机activity分配内存而把app的主activity回收了。遇到此问题建议使用nvue页面并内嵌的自定义相机的原生或uts插件。相关分析报告详见

注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,在应用下次启动时才能访问得到。

success 返回参数说明

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

File 对象结构如下

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

示例

uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album'], //从相册选择success: function (res) {console.log(JSON.stringify(res.tempFilePaths));}
});

2.预览图片

uni.previewImage(OBJECT)

预览图片。

OBJECT 参数说明

参数名类型必填说明平台差异说明
currentString/Number详见下方说明详见下方说明
showmenuBoolean是否显示长按菜单,默认值为 true微信小程序2.13.0
urlsArray需要预览的图片链接列表
indicatorString图片指示器样式,可取值:“default” - 底部圆点指示器; “number” - 顶部数字指示器; “none” - 不显示指示器。App
loopBoolean是否可循环预览,默认值为 falseApp
longPressActionsObject长按图片显示操作菜单,如不填默认为保存相册App 1.9.5+
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

current 参数说明

1.9.5+ 支持传图片在 urls 中的索引值

current 为当前显示图片的链接/索引值,不填或填写的值无效则为 urls 的第一张。App平台在 1.9.5至1.9.8之间,current为必填。不填会报错

注意,当 urls 中有重复的图片链接时:

  • 传链接,预览结果始终显示该链接在 urls 中第一次出现的位置。
  • 传索引值,在微信/百度/抖音小程序平台,会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。

举例说明:

一组图片 [A, B1, C, B2, D],其中 B1 与 B2 的图片链接是一样的。

  • 传 B2 的链接,预览的结果是 B1,前一张是 A,下一张是 C。
  • 传 B2 的索引值 3,预览的结果是 B2,前一张是 C,下一张是 D。此时在微信/百度/抖音小程序平台,最终传入的 urls 是 [A, C, B2, D],过滤掉了与 B2 重复的 B1。

longPressActions 参数说明

参数类型必填说明
itemListArray按钮的文字数组
itemColorString按钮的文字颜色,字符串格式,默认为"#000000"
successFunction接口调用成功的回调函数,详见返回参数说明
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数类型说明
indexNumber用户长按图片的索引值
tapIndexNumber用户点击按钮列表的索引值

示例

// 从相册选择6张图
uni.chooseImage({count: 6,sizeType: ['original', 'compressed'],sourceType: ['album'],success: function(res) {// 预览图片uni.previewImage({urls: res.tempFilePaths,longPressActions: {itemList: ['发送给朋友', '保存图片', '收藏'],success: function(data) {console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');},fail: function(err) {console.log(err.errMsg);}}});}});

TIPS

  • 在非H5端,previewImage是原生实现的,界面自定义灵活度较低。
  • 插件市场有前端实现的previewImage,性能低于原生实现,但界面可随意定义;插件市场也有适于App端的previewImage原生插件,提供了更多功能。

测试代码

<template><view><button type="default" @click="uploadimage">上传图片</button><image v-for=" item in ImageArr" :src="item" @click="previewImage(item)"></image></view>
</template><script>export default {data() {return {ImageArr: []}},methods: {//上传图片uploadimage() {uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album'], //从相册选择success: res => {console.log(JSON.stringify(res.tempFilePaths));this.ImageArr = res.tempFilePaths;}});},//预览图片previewImage(current) {uni.previewImage({current: current, //图片路径urls: this.ImageArr, //图片数组loop: true, //是否可以循环预览 无效indicator: Number // 图片指示器样式 无效})}}}
</script><style></style>


http://www.ppmy.cn/server/146733.html

相关文章

编程语言中什么是框架?什么是Cocoa?Foundation.framework的底层实现?Swift如何引入ObjC框架?

编程语言中什么是框架&#xff1f; 在编程语言中&#xff0c;框架&#xff08;Framework&#xff09;是一种特定的软件库&#xff0c;它提供了一套预先定义的代码和组件&#xff0c;用于加速和简化特定类型的应用程序的开发。框架通常提供了一套标准化的开发工具集和约定&#…

【Pytorch】优化器(Optimizer)模块‘torch.optim’

torch.optim 是 PyTorch 中提供的优化器&#xff08;Optimizer&#xff09;模块&#xff0c;用于优化神经网络模型的参数&#xff0c;更新网络权重&#xff0c;使得模型在训练过程中最小化损失函数。它提供了多种常见的优化算法&#xff0c;如 梯度下降法&#xff08;SGD&#…

Apache storm安装教程(单机版)

本章教程基于linux centos7安装Apache storm 单机版。 jdk版本:11.0.25 python版本:3.6.8 ZooKeeper 版本:3.7.2 Apache storm版本:2.7.1 一、Apache storm简介 Apache Storm 是一个分布式实时计算系统,专为处理大规模流数据而设计。它允许开发者实时处理大数据流,并对数…

SQL语句在MySQL中的执行过程

一 MySQL 基础架构分析 1.1 MySQL 基本架构概览 下图是 MySQL 的一个简要架构图&#xff0c;从下图你可以很清晰的看到用户的 SQL 语句在 MySQL 内部是如何执行的。 先简单介绍一下下图涉及的一些组件的基本作用帮助大家理解这幅图&#xff0c;在 1.2 节中会详细介绍到这些组…

HarmonyOS4+NEXT星河版入门与项目实战(25)------UIAbility启动模式(文档编辑案例)

文章目录 1、启动模式2、Specified启动模式实现步骤3、文档编辑案例1、文件创建2代码实现3、Statge 创建4、添加配置1、启动模式 Singleton启动模式: 每个 UIAbility 只存在一个实例,是默认的启动模式,任务列表中只会存在一个相同的 UIAbilityStandard启动模式: 每次启动 U…

RabbitMQ在手动消费的模式下设置失败重新投递策略

最近在写RabbitMQ的消费者&#xff0c;因为业务需求&#xff0c;希望失败后重试一定次数&#xff0c;超过之后就不处理了&#xff0c;或者放入死信队列。我这里就达到重试次数后就不处理了。本来以为很简单的&#xff0c;问了kimi&#xff0c;按它的方法配置之后&#xff0c;发…

C++20: 像Python一样逐行读取文本文件并支持切片操作

概要 逐行读取文本文件&#xff0c;并提取其中连续的几行&#xff0c;这对于 Python 来说是小菜一碟。 C 则很笨拙&#xff0c; 语言不自带这些。 这次我来拯救 C boys & girls&#xff0c; 在 C20 环境下&#xff0c;山寨一个 Python 下的逐行读文本文件、支持 slice 操作…

【C++】 list接口以及模拟实现

list介绍 list文档介绍 C中的list是一个双向链表容器。它允许在任意位置进行快速插入和删除操作&#xff0c;并且能够在常量时间内访问任意元素&#xff0c;并且该容器可以前后双向迭代。 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容…