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


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实现的表格分页实现代码
Jun 21 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
js实现飞机大战小游戏
Aug 26 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
php 文件上传实例代码
2012/04/19 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
Jquery判断$("#id")获取的对象是否存在的方法
2013/09/25 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
详解javascript函数的参数
2015/11/10 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
js实现全选和全不选
2020/07/28 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python操作mysql代码总结
2018/06/01 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
益模软件Java笔试题
2012/03/27 面试题
3个CCIE对一个工程师的面试题
2012/05/06 面试题
Servlet方面面试题
2016/09/28 面试题
幼儿园春季开学寄语
2014/04/03 职场文书
财务人员入职担保书
2015/09/22 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS