微信小程序 拍照或从相册选取图片上传代码实例


Posted in Javascript onAugust 28, 2019

这篇文章主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

upload.wxml

<!--pages/upload/upload.wxml-->
<button bindtap='uploadPhoto'>拍照选取照片上传</button>

upload.js

// pages/upload/upload.js
Page({
 data: {
  imgData: []
 },
 uploadPhoto(e) { // 拍摄或从相册选取上传
  let that = this;
  wx.chooseImage({
   count: 1, // 默认9
   sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
   success(res) {
    let tempFilePaths = res.tempFilePaths; // 返回选定照片的本地路径列表 
    that.upload(that, tempFilePaths);
   }
  })
 },
 upload(page, path) { // 上传图片
  wx.showToast({ icon: "loading", title: "正在上传……" });
  wx.uploadFile({
   url: '上传图片接口url', //后端接口
   filePath: path[0],
   name: 'file',
   header: {
    "Content-Type": "multipart/form-data"
   },
   success(res) {
    if (res.statusCode != 200) {
     wx.showModal({ title: '提示', content: '上传失败', showCancel: false });
     return;
    } else{
     console.log("上传成功! 可对返回的值进行操作,比如:存入imgData;");
    }
   },
   fail(e) {
    wx.showModal({ title: '提示', content: '上传失败', showCancel: false });
   },
   complete() {
    wx.hideToast(); //隐藏Toast
   }
  })
 }
})

ps:以上是单图上传,如果需要多图上传,请看下方:

// pages/publish/publish.js
Page({
 data: {
  imgData: []
 },
 uploadPhoto(e) { // 拍摄或从相册选取上传
  let that = this;
  wx.chooseImage({
   count: 9 - that.data.imgData.length, // 默认最多上传9张
   sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
   success(res) {
    let tempFilePaths = res.tempFilePaths; // 返回选定照片的本地路径列表 
    that.upload(that, tempFilePaths);
   }
  })
 },
 upload(page, path) { // 上传图片
  let that = this;
  wx.showToast({ icon: "loading", title: "正在上传……" });
  for (var i=0; i<path.length; i++) {
   wx.uploadFile({
    url: '上传图片接口url', //后端接口
    filePath: path[i],
    name: 'file',
    header: app.globalData.header,
    success(res) {
     if (res.statusCode != 200) {
      wx.showModal({
       title: '提示', 
       content: '第' + i +'张图片上传失败', 
       showCancel: false
      });
      return;
     } else {
      console.log('第' + i +'张图片上传成功!可在此操作,比如:存入imgData;');
     }
    },
    fail(e) {
     wx.showModal({
     title: '提示', 
     content: '第' + i +'张图片上传失败', 
     showCancel: false
     });
    },
    complete() {
     wx.hideToast(); //隐藏Toast
    }
   })
  }
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
input的focus方法使用
Mar 13 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
eslint 的三大通用规则详解
May 16 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
小程序中this.setData的使用和注意事项
Aug 28 #Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 #Javascript
vue实现标签云效果的方法详解
Aug 28 #Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 #Javascript
TypeScript类型声明书写详解
Aug 28 #Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 #Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 #Javascript
You might like
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
第五章 php数组操作
2011/12/30 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
Python类super()及私有属性原理解析
2020/06/15 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
给校长的建议书300字
2014/05/16 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书