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


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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
Vue如何清空对象
Mar 03 Vue.js
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
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
犀利的js 函数集合
2009/06/11 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
python字符串连接方法分析
2016/04/12 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python程序中设置HTTP代理
2016/11/06 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
详解python对象之间的交互
2020/09/29 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
收银员的岗位职责范本
2014/02/04 职场文书
微笑服务演讲稿
2014/05/13 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
董事长秘书工作总结
2015/08/14 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
检举信的写法
2019/04/10 职场文书
导游词之山东孔庙
2019/11/04 职场文书