uniapp程序上传图片功能的实现

网友投稿 1011 2023-11-14

目录🍍前言🍋正文1、首先看官网2、案例代码演示3、效果展示

🍍前言

本篇文章我们研究一下,在移动端开发过程中经常使用到的图片上传功能。在大多数小程序或者APP中都会遇到一些实名认证或者头像上传的功能。uniapp官方也提供了相应的API供我们使用。

官网地址:uni.chooseImage(OBJECT)

🍋正文

1、首先看官网

uniapp小程序上传图片功能的实现

uni.chooseImage(OBJECT) API 介绍

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

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.19+successFunction是成功则返回图片的本地文件路径列表 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/authorize`App端如需选择非媒体文件,可在插件市场搜索文件选择,其中Android端可以使用Native.js,无需原生插件,而iOS端需要原生插件。选择照片大多为了上传,uni ui封装了更完善的uni-file-picker组件,文件选择、上传到uniCloud的免费存储和cdn中,一站式集成。强烈推荐使用。

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

success 返回参数说明

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

File 对象结构如下

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

示例

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

这里给大家说个大坑:

chooseImage这个方法的成功回调函数,success 必须使用ES6 的箭头函数,否则this的作用域是当前函数,就获取不到data方法中的自己定义的变量。如果不理解的话,请看下面案例展示内容。ES6 箭头函数官方描述:对于普通函数来说,内部的this指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的this对象,内部的this就是定义时上层作用域中的this。也就是说,箭头函数内部的this指向是固定的,相比之下,普通函数的this指向是可变的。

2、案例代码演示

看了官网的案例 我们也来自己动手写一写。

本案例操作描述:默认显示添加封面按钮,点击调用本地图片选择上传一张作为封面使用,可进行切换。(忽略项目中比较丑陋的字体颜色,只做案例展示使用,与本人审美无关(狗头))参数设置我在代码中都做了详细的解释,没有写的参数使用官网的默认值。成功的回调函数success写了一种 ES5 的形式,写了一种 ES6 的形式供大家参考。封面图片的src是用了动态赋值的方式(:src="cover")。

在此说明:本案例只做了本地上传图片的效果,没有调用接口上传到服务器,实际工作开发中是会有图片上传接口的,官网也提供了对应的将本地资源上传到开发者服务器API:uni.uploadFile(OBJECT),大家可以去参考一下。如有实际开发接口问题可私信博主。

3、效果展示

您可能感兴趣的文章:uniapp中uni.request(OBJECT)接口请求封装实例代码uniapp上传本地图片以及以二进制流的方式上传uniapp上传图片和上传视频的实现方法uniapp实现h5、app与微信小程序三端pdf文件-和预览功能uniapp项目实践封装通用请求上传以及-方法总结

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:移动终端安全管理平台 - 提供全面的移动设备保护方案
下一篇:宠物社区app开发都有哪些功能?
相关文章

 发表评论

暂时没有评论,来抢沙发吧~