急速浏览器打开新网站,wordpress主题the7.6,网站的分辨率是多少,国内互联网建站公司排名文章目录 1.上传图片2.预览图片 1.上传图片
uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
App端如需要更丰富的相机拍照API#xff08;如直接调用前置摄像头#xff09;#xff0c;参考plus.camera 微信小程序从基础库 2.21.0 开始#xff0c; wx.choos… 文章目录 1.上传图片2.预览图片 1.上传图片
uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
App端如需要更丰富的相机拍照API如直接调用前置摄像头参考plus.camera 微信小程序从基础库 2.21.0 开始 wx.chooseImage 停止维护请使用 uni.chooseMedia 代替。 OBJECT 参数说明
参数名类型必填说明平台差异说明countNumber否最多可以选择的图片张数默认9见下方说明sizeTypeArray否original 原图compressed 压缩图默认二者都有App、微信小程序、支付宝小程序、百度小程序extensionArray否根据文件拓展名过滤每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9)sourceTypeArray否album 从相册选图camera 使用相机默认二者都有。如需直接开相机或直接选相册请只使用一个选项cropObject否图像裁剪参数设置后 sizeType 失效App 3.1.19successFunction是成功则返回图片的本地文件路径列表 tempFilePathsfailFunction否接口调用失败的回调函数小程序、AppcompleteFunction否接口调用结束的回调函数调用成功、失败都会执行
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/authorizeApp端如需选择非媒体文件可在插件市场搜索文件选择其中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本地文件大小单位BnameString包含扩展名的文件名称仅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.0urlsArray是需要预览的图片链接列表indicatorString否图片指示器样式可取值“default” - 底部圆点指示器 “number” - 顶部数字指示器 “none” - 不显示指示器。ApploopBoolean否是否可循环预览默认值为 falseApplongPressActionsObject否长按图片显示操作菜单如不填默认为保存相册App 1.9.5successFunction否接口调用成功的回调函数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否按钮的文字颜色字符串格式默认为#000000successFunction否接口调用成功的回调函数详见返回参数说明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原生插件提供了更多功能。
测试代码
templateviewbutton typedefault clickuploadimage上传图片/buttonimage v-for item in ImageArr :srcitem clickpreviewImage(item)/image/view
/templatescriptexport 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 // 图片指示器样式 无效})}}}
/scriptstyle/style
