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

 更新时间:2017年01月06日 15:31:51   投稿:lqh  
这篇文章主要介绍了微信小程序-拍照或选择图片并上传文件的相关资料,需要的朋友可以参考下

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

调用拍照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防抖与节流的区别与实现

    这篇文章主要介绍关于JavaScript防抖与节流的区别与实现,防抖就是用户多次触发事件,在用户一直触发事件中,事件不会执行,只有在用户停止触发事件一段时间之后再执行这个事件一次,二节流是用户多次触发事件,具体详情一i起来学习下面文章内容吧
    2021-10-10
  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas详细介绍

    这篇文章主要介绍了微信小程序 wxapp画布 canvas的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 数据访问实例详解

    微信小程序 数据访问实例详解

    这篇文章主要介绍了微信小程序 数据访问实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • JavaScript 对象详细整理总结

    JavaScript 对象详细整理总结

    这篇文章主要介绍了JavaScript 对象详细整理总结的相关资料,需要的朋友可以参考下
    2016-09-09
  • Hardhat进行合约测试环境准备及方法详解

    Hardhat进行合约测试环境准备及方法详解

    这篇文章主要为大家介绍了Hardhat进行合约测试环境准备及方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 独立使用umi的核心插件模块示例详解

    独立使用umi的核心插件模块示例详解

    这篇文章主要为大家介绍了独立使用 umi 的核心插件模块示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JS前端轻量fabric.js系列物体基类

    JS前端轻量fabric.js系列物体基类

    这篇文章主要为大家介绍了实现JS前端轻量fabric.js系列物体基类示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 前端JavaScript大管家 package.json

    前端JavaScript大管家 package.json

    这篇文章主要介绍了前端JavaScript大管家 package.json,在每个前端项目中,都有package.json文件,它是项目的配置文件,常见的配置有配置项目启动、打包命令,声明依赖包等,下面我们就来学习 package.json的详细内容,需要的朋友可以参考一下
    2021-10-10
  • umi插件开发仿dumi项目实现基础路由解析

    umi插件开发仿dumi项目实现基础路由解析

    这篇文章主要为大家介绍了umi插件开发仿dumi项目实现基础路由解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Performance 内存监控使用技巧详解

    Performance 内存监控使用技巧详解

    这篇文章主要为大家介绍了Performance 内存监控使用技巧详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论