微信小程序实现图片上传


Posted in Javascript onMay 23, 2019

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下/p>

图片上传服务器:

wxml

<view class="container">
 <button bindtap='chooseImageTap'>上传图片</button>
</view>

wxss

Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  imgs: [],//本地图片地址数组
  picPaths:[],//网络路径
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  
 },
 //添加上传图片
 chooseImageTap: function () {
  var that = this;
  wx.showActionSheet({
   itemList: ['从相册中选择', '拍照'],
   itemColor: "#00000",
   success: function (res) {
    if (!res.cancel) {
     if (res.tapIndex == 0) {
      that.chooseWxImage('album')
     } else if (res.tapIndex == 1) {
      that.chooseWxImage('camera')
     }
    }
   }
  })
 },
 // 图片本地路径
 chooseWxImage: function (type) {
  var that = this;
  var imgsPaths = that.data.imgs;
  wx.chooseImage({
   sizeType: ['original', 'compressed'],
   sourceType: [type],
   success: function (res) {
    console.log(res.tempFilePaths[0]);
    that.upImgs(res.tempFilePaths[0], 0) //调用上传方法
   }
  }) 
 },
 //上传服务器
 upImgs: function (imgurl, index) {
  var that = this;
  wx.uploadFile({
   url: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx',//
   filePath: imgurl,
   name: 'file',
   header: {
    'content-type': 'multipart/form-data'
   },
   formData: null,
   success: function (res) {
    console.log(res) //接口返回网络路径
    var data = JSON.parse(res.data)
     that.data.picPaths.push(data['msg'])
     that.setData({
      picPaths: that.data.picPaths
     })
     console.log(that.data.picPaths)
   }
  })
 },
 
})

思路很简单,多张上传的话,在 upImgs 方法回调做判断 index++ 继续调用 upImgs方法即可

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

Javascript 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
javascript html5实现表单验证
Mar 01 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
WebSocket的简单介绍及应用
May 23 #Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 #Javascript
微信小程序实现的picker多级联动功能示例
May 23 #Javascript
js console.log打印对象时属性缺失的解决方法
May 23 #Javascript
Node.js+ELK日志规范的实现
May 23 #Javascript
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
js尾调用优化的实现
May 23 #Javascript
You might like
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP文件操作方法汇总
2015/07/01 PHP
php提高网站效率的技巧
2015/09/29 PHP
php数据访问之查询关键字
2016/05/09 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Python 处理文件的几种方式
2019/08/23 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python如何设置静态变量
2020/09/07 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
python绘制高斯曲线
2021/02/19 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
个人承诺书怎么写
2014/05/24 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
销售合作意向书范本
2015/05/08 职场文书
招商银行收入证明
2015/06/17 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android