uniapp拍照上传页面:

1.进入页面的时候就开始检查,是否已经上传过信息?
(1)获取用户的信息
(2)判断是否登入过了? 未登入的话 跳转到登入页
(3)(一).获取用户信息里的标识值
( 二).判断标识值 为1 是已经提交过了 跳转到提交页 ,
为0 是未提交过 显示填写信息的页面,
为空的话 发起请求 获取用户信息里的标识值(需强转parseInt)并赋值给app.vue里的user的isApply(标识值)
(三) 赋值完后,再次进行判断,为 1 的话跳转到提交页 为0的话显示填写信息的页面

2.跳转到提交页的方法(提前写好)
隐藏照相的方法(提前写好)
拒绝使用摄像头的方法(提前写好) camera中@error绑定的方法

3.点击照相,需要先获取用户的权限,照相的权限
(1).用wx.getSetting({})获取用户当前的设置 用来获取用户的照相的权限
(2).用户如果同意权限 那么res.authSetting[‘scope.camera’] 的值应该是true
(3) 所以要判断用户是否给予了权限 判断res.authSetting[‘scope.camera’]是否为真 为真的情况下,显示照相的内容
(4)为假的情况下,说明用户没有给与权限,需要重新唤醒给与权限的窗口,重新赋予权限
4.重新获取用户的权限,就需要用到wx.openSetting({}),让用户重新的赋予权限,才能正常的使用功能,在success的方法中再次判断,res.authSetting[‘scope.camera’]的值是否为true,为true的话 在显示照相的内容
5.点击确定的方法中 将照片上传
拍摄照片:(1).需要创建camera组件 var camera = uni.createCameraContext();
(创建并返回 camera 组件的上下文 cameraContext 对象。)
(2).用创建的camera去调用takePhoto对象 camera.takePhoto({})
(3)(一).在success的函数中判断是否有临时路径,有的话进入判断 没有的话 调佣关闭照相的方法
(二).在有临时路径的情况下,将临时路径赋值给data中的值
(三).赋值完后,就进行照片的上传
照片的上传:1.根据项目的api,上传相关的图片临时路径,在catth中若有错误就提示错误的内容

4.提交用户信息:(一).判断信息是否都有填写,若有空值,就要提醒用户填写信息
(二).根据项目中的api,提交相关的信息,在then中给app.vue中的user这是标识值为1
(三).在catth中若有错误就提示错误信息

从相册中选区照片:1.需要用到uni.chooseImage({})这个api,其中count这个值是限制选择照片的张数,最多9张
2.在success的函数中进行判断tempFilePaths的值是否存在和tempFilePaths[0]是否有值,有的话进入判断
3.将获取到的临时图片的路径保存到data中,在去调用上传图片的api

Logo

前往低代码交流专区

更多推荐