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


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 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
js实现简易聊天对话框
Aug 17 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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
第十一节 重载 [11]
2006/10/09 PHP
建立动态的WML站点(一)
2006/10/09 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
js实现打字小游戏
2019/12/17 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python如何建立全零数组
2020/07/19 Python
python线程优先级队列知识点总结
2021/02/28 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
集中整治工作方案
2014/05/01 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
开平碉楼导游词
2015/02/06 职场文书
创先争优活动个人总结
2015/03/04 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
python之基数排序的实现
2021/07/26 Python