上传图片
API: wx.chooseImage() 和 wx.uploadFile()
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
console.log(res.tempFiles); // 图片的本地文件列表,每一项是一个file对象
// 结果: [{path: "http://tmp/wx0ffcd03a1dfdc451.o6zAJs7JDPzeAscW09c_BG24fpdU.6919dfcada671055948023075afd859a.jpg", size: 61034}, ...]
console.log(res.tempFilePaths); // 图片的本地文件路径列表
// 结果: ["http://tmp/wx0ffcd03a1dfdc451.o6zAJs7JDPzeAscW09c_BG24fpdU.6919dfcada671055948023075afd859a.jpg"]
var tempFilePaths = res.tempFilePaths;
wx.uploadFile({
url: '/your_url/receive_file', // 图片上上传的地址,请求方式默认为POST且不可更改
filePath: tempFilePaths[0], // 要上传的文件的路径,注:一次只能上传一个文件,若要上传多张图片,请使用递归
name: 'file', // 文件对应的键名,后端可以通过这个key获取到文件的二进制内容
formData:{
'user_id': '123',
'name': 'Jack',
'age': 18
},
success: function(res){
var data = res.data
//do something
}
})
}
})
如果需要上传多张图片,那么需要把wx.uploadFile()封装成一个函数,判断图片上传是否完成,如果没有完成,则一直调用这个函数,否则,图片上传完成。
 

微信小程序选择并上传图片的更多相关文章

  1. 微信小程序中如何上传图片

    本篇文章给大家带来的内容是关于微信小程序中如何上传图片(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.wxml文件 <text>上传图片</text ...

  2. 微信小程序---选择图片和调用微信拍照

    1.实现点击头像按钮实现选择图片或者拍照,将图片重新设置成头像: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello ...

  3. 微信小程序选择视频,视频上传,视频播放

    请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...

  4. 微信小程序——选择某个区间的数字

    很久没有更新文章啦~~记录下今天弄的一个小功能. 先上图: 需求很简单: 第1列改变的时候,第2列也随着改变,并且比第1列大1k. 这里用到了微信的picker 组件,对于不太熟练这个组件的小伙伴可以 ...

  5. 微信小程序 选择微信自带的地址 用户授权选择了拒绝

    // 选择微信自带地址 addAddr:function () { wx.chooseAddress({ success: function (res) { self.setData({ addrIn ...

  6. 微信小程序选择图片,查看图片信息,浏览图片,图片上传

    依次点击链接请查看以下步骤 选择图片: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageob ...

  7. 微信小程序 --- 选择图片和拍照

    wx.chooseImage 选择图片 / 进行拍照 //获取应用实例 const app = getApp() Page({ data: { onOff:true }, btnclick:funct ...

  8. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  9. 微信小程序-上传照片-多张显示

    图片就是一个简单的效果 实现 先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text ...

随机推荐

  1. MariaDB数据表操作实例

    1. MariaDB 数据库操作实例 MariaDB>create database class; //创建class数据库 MariaDB>use class; MariaDB>c ...

  2. UNIX高级环境编程(12)进程关联(Process Relationships)- 终端登录过程 ,进程组,Session

    在前面的章节我们了解到,进程之间是有关联的: 每个进程都有一个父进程: 子进程退出时,父进程可以感知并且获取子进程的退出状态. 本章我们将了解: 进程组的更多细节: sessions的内容: logi ...

  3. HashSet集合的add()方法的源码

    interface Collection { ... } interface Set extends Collection { ... } class HashSet implements Set { ...

  4. 用JS制作《飞机大作战》游戏_第1讲(素材查找和界面框架搭建)-陈远波

    一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面 ...

  5. Netty入门(九)空闲连接以及超时

    检测空闲连接和超时是为了及时释放资源.常见的方法是发送消息来测试一个不活跃的连接,通常称为“心跳”. Netty 提供了几个 ChannelHandler 来实现此目的,如下: 下面是 IdleSta ...

  6. 简单的表格json控件

    简单的表格json控件 由于最近做的项目一直有表格的形式展示数据,所以想写个简单的关于表格方面的控件出来,想用JSON数据直接渲染出来,因为开发给到我们前端的字段可能会叫不同的名字,所以我们前端渲染页 ...

  7. JAVA框架 Spring 注解注入

    一.首先需要引入jar包:spring-aop-4.2.4.RELEASE.jar.(在spring解压包libs内). 二.如果注解方式注入依赖的对象,需要引用新的约束. 内的:xsd-config ...

  8. CentOS中配置Kafka集群

    环境:三台虚拟机Host0,Host1,Host2 Host0:192.168.10.2 Host1:  192.168.10.3 Host2:  192.168.10.4 在三台虚拟机上配置zook ...

  9. python3 面向对象编程--类的封装和继承

    #python3import refrom urllib import requestimport os class PosterSpider(object):     def __init__(se ...

  10. VBA 上传数据与查找数据 while循环 和 for循环

    Option Explicit  上传数据Private Sub CommandButton1_Click() If MsgBox("请确认数据是否准确,是否确认上传?", vbC ...