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


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 相关文章推荐
JavaScript经典效果集锦
Jul 06 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
JavaScript多线程详解
Aug 12 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
基于Proxy的小程序状态管理实现
Jun 14 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
正则表达式语法
2006/10/09 Javascript
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
php类常量用法实例分析
2015/07/09 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
用js怎么把&字符换成"&amp:"
2006/10/19 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
python算法学习之基数排序实例
2013/12/18 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python遍历pandas数据方法总结
2018/02/09 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python的range和linspace使用详解
2019/11/27 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
区分python中的进程与线程
2020/08/13 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
综治工作汇报材料
2014/10/27 职场文书
聚会通知怎么写
2015/04/23 职场文书
初中班主任教育随笔
2015/08/15 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书