当前位置:首页 » 文件传输 » uniapp调用摄像头拍照上传
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

uniapp调用摄像头拍照上传

发布时间: 2022-12-06 21:25:48

‘壹’ uniapp怎么实现选择和上传图片分开

打开HBuilderX开发工具,创建uniapp项目,绑定点击事件即可。
在methods中,定义点击事件,调用api中的unichooseImage。在上传照片的API中,请求成功后调用unigetImageInfo,获取图片信息。在获取图片方法下方,调用uni previewImage,预览图片。保存代码并运行到小程序模拟器,查看界面显示效果。
uniapp是一个使用Vuejs开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序、快应用等多个平台。

‘贰’ uniapp 上传图片遇到的问题

昨天在测试上传图片的时候,突然发现一个很狗血的问题,就是ios选取手机里保存的图片都可以的,但是使用拍照的图片就是上传不了,一点击选取都立马弹出报错信息,我当时并不觉得是图片大小的问题,因为在安卓机上测试的时候,拍照图片也都是可以上传的,后面对图片的大小限制最多也是有10M的,最后才发现是nginx上面默认有传输大小的限制【哭笑】,最后前端上传图片之前做了压缩处理,nginx也把限制放宽,最后终于可以上传所有图片了【竖起大拇指】

‘叁’ uniapp上传图片至服务器,获得在线图片链接预览(实战)

功能需求:
前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览。

思路如下:
前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。

首先
我们看一下uniapp的官方文档:
https://uniapp.dcloud.io/api/media/image?id=chooseimage

大概是这样的
先写一个模拟的demo
1:首先我是是用了colorUI的框架,在项目里面引入

在page底下的vue文件引入

这样一来,就不需要写什么样式了,直接使用写好的就行了。

效果是这样的
每次选完图片之后显示在页面上,我这里设置了最多可以选择四张,图片链接使用了临时的blob,接下来就要使用后端小伙伴给的接口,将自己本地的二进制文件传给他了。

在 chooseImage 选择好图片之后,写一个成功的回调函数,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。

若是请求成功
则返回一个图片链接

添加接口之后 的,demo如下:

‘肆’ uni-app 微信小程序 上传图片 文件 uni.uploadFile() 、 uni.chooseImage()

微信小程序项目注册需要上传门店信息,所以需要用到上传图片功能。

可以分为两种情况:

官方链接: uni.uploadFile

二、统一上传
点击选择框 首先使用uni.chooseImage(),从本地相册选择图片或使用相机拍照。成功则返回图片的本地文件路径列表 tempFilePaths;然后本地赋值保存本地图片地址。

官方链接: uni.chooseImage

附上效果图: