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


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模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
详解vue中移动端自适应方案
May 05 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 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
是否存在第一台收音机的说法
2021/03/01 无线电
PHP与MySQL交互使用详解
2006/10/09 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
对python中return和print的一些理解
2017/08/18 Python
python 构造三维全零数组的方法
2018/11/12 Python
python读写配置文件操作示例
2019/07/03 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
单位介绍信范文
2014/01/18 职场文书
年会搞笑主持词
2014/03/27 职场文书
学校安全责任书
2014/04/14 职场文书
安全保证书
2015/01/16 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
交通事故调解协议书
2015/05/20 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
JS继承最简单的理解方式
2021/03/31 Javascript