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


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的checkbox下拉框插件代码
Jun 25 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
javascript 常见功能汇总
Jun 11 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
shiro授权的实现原理
Sep 21 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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
Smarty变量用法详解
2016/05/11 PHP
js 函数的副作用分析
2011/08/23 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python中生成器和迭代器的区别详解
2018/02/10 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
高一英语教学反思
2014/01/22 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
给领导的检讨书
2014/02/16 职场文书
运动会入场词50字
2014/02/20 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
房屋出租委托书格式
2014/09/23 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python