微信小程序实现图片上传


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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
vue模板语法-插值详解
Mar 06 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
vue slot与传参实例代码讲解
Apr 28 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实现下载断点续传的方法
2014/11/12 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
php生成无限栏目树
2017/03/16 PHP
Symfony查询方法实例小结
2017/06/28 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
python中adb有什么功能
2020/06/07 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
教师师德反思材料
2014/02/15 职场文书
个人违纪检讨书
2014/09/15 职场文书
夫妻吵架保证书
2015/05/08 职场文书
服装店员工管理制度
2015/08/07 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
市级三好生竞选稿
2015/11/21 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang