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


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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 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
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
php实现数字补零的方法总结
2018/09/12 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Python如何读写字节数据
2020/08/05 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
业务员简历自我评价
2014/03/06 职场文书
毕业生就业协议书
2014/04/11 职场文书
银行求职信怎么写
2014/05/26 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
红歌会主持词
2015/07/02 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers