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


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 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
详细分析vue响应式原理
Jun 22 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
小程序中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版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
微信小程序签到功能
2018/10/31 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python树莓派红外反射传感器
2019/01/21 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python换行与不换行的输出实例
2020/02/19 Python
python中JWT用户认证的实现
2020/05/18 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
如何卸载python插件
2020/07/08 Python
Python之Sklearn使用入门教程
2021/02/19 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
秋季红领巾广播稿
2014/01/27 职场文书
公益活动邀请函
2014/02/05 职场文书
分公司负责人任命书
2014/06/04 职场文书
上班旷工检讨书
2015/08/15 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS