微信小程序-拍照或选择图片并上传文件


Posted in Javascript onJanuary 06, 2017

微信小程序-拍照或选择图片并上传文件

调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject

上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html

主要js代码:

choice: function () { 
  var that = this 
  wx.chooseImage({ 
   count: 1, // 默认9 
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 
   success: function (res) { 
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 
    var tempFilePaths = res.tempFilePaths 
    that.setData({ 
     textHidden: true, 
     image_photo: tempFilePaths, 
     photoHidden: false 
    }) 
   } 
  }) 
 }, 
 uploadPhoto: function () { 
  var that = this 
  let param = util.json2Form({ 
   tel: '18600346580', 
   orderSn: that.data.orderSn, 
   parkingPhoto: that.data.image_photo, 
  }); 
  wx.uploadFile({ 
   url: 'https://testapi.****.com/v4.0.0/uploadParkingPhoto', //仅为示例 
   filePath: that.data.image_photo[0], 
   name: 'parkingPhoto', 
   formData: { 
    'tel': '***********', 
    'orderSn': that.data.orderSn, 
   }, 
   success: function (res) { 
    var obj = JSON.parse(res.data);; 
    console.log(obj.result) 
    console.log(obj.msg) 
    var resule = obj.result; 
    var msg = obj.msg; 
    if (resule == 'false') { 
     wx.showToast({ 
      title: msg, 
      icon: 'success', 
      duration: 2000 
     }) 
    } else { 
     wx.navigateBack({ 
      delta: 1, 
      success: function (res) { 
       wx.showToast({ 
        title: msg, 
        icon: 'success', 
        duration: 2000 
       }) 
      }, 
 
     }) 
    } 
   } 
  }) 
 
 }

Tip:

1.调用wx.chooseImage() 自动弹出选择窗口,不用调用操作菜单wx.showActionSheet(),否则重复

如图

微信小程序-拍照或选择图片并上传文件

2. 上传文件的时候filePath必须是数组,当你单张的时候需要使用数组,若只有一张要用[0]

3. 最需要注意的是,success返回数据是String类型,我们需要将String类型转换成Object

微信小程序-拍照或选择图片并上传文件

js字符串转换成obj

用js 是有三种方法的

  1. js自带的eval函数,其中需要添加小括号eval('('+str+')');
  2. JSON.parse(str)
  3. $.parseJSON( jsonstr )

但是在微信小程序中,我们只能用JSON.parse(str),其他的都不可以

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
ajax异步请求详解
Jan 06 #Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 #Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 #Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 #Javascript
JS调用Android、Ios原生控件
Jan 06 #Javascript
JS正则匹配中文的方法示例
Jan 06 #Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 #Javascript
You might like
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
Expandable "Detail" Table Rows
2007/08/29 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
python自动化测试实例解析
2014/09/28 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
秘书岗位职责
2013/11/18 职场文书
一名女生的自荐信
2013/12/08 职场文书
党支部三会一课计划
2014/09/24 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年档案室工作总结
2015/05/23 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
不要在HTML中滥用div
2021/05/08 HTML / CSS