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


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 相关文章推荐
asm.js使用示例代码
Nov 28 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
canvas实现图像截取功能
Feb 06 Javascript
JS变量及其作用域
Mar 29 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
学前端,css与javascript重难点浅析
Jun 11 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比较多维数组中值的大小排序实现代码
2012/09/08 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
koa源码中promise的解读
2018/11/13 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
python算法学习之计数排序实例
2013/12/18 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python实现图片识别汽车功能
2018/11/30 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python Django搭建网站流程图解
2020/06/13 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
2014年商场国庆节活动策划方案
2014/09/16 职场文书
课外活动实习计划
2015/01/19 职场文书
周一给客户的问候语
2015/11/10 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS