上传图片
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. MySQL基础之 视图

    视图 视图就是从一个表或多个表导出来的一张虚拟的表.通过这个窗口可以看到系统专门提供的数据,方便用户操作的同时增加了安全性. 视图的特点: 1.视图的列可以来自于不同的表. 2.视图是由实际存在的表创 ...

  2. October 14th 2017 Week 41st Saturday

    I was well beaten myself, and I am beffer for it. 我自己也被打败过,但我因此变得更好. For most of us, the life road c ...

  3. hadoop集群为分布式搭建

    1.准备Linux环境设置虚拟机网络    1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改 ...

  4. phpstudy绑定项目(dist文件)域名--陈远波

    该篇博客是针对已经打包好的dist文件用phpstudy工具进行域名绑定,dist文件生成在这笔者不进行描述,绑定步骤如下: 一:官网下载phpstudy软件进行安装:http://phpstudy. ...

  5. 给SVN设置代理

    XP系统在C:\Documents and Settings\Administrator\Application Data\Subversion目录下 win7及以上系统在C:\Users\admin ...

  6. Eclipse 插件安装报错问题(已解决)

    错误信息提示: An error occurred while installing the items session context was:(profile=epp.package.jee, p ...

  7. BZOJ 2761 不重复数字 set

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2761 题目大意: 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出 ...

  8. python第二十九课——文件读写(复制文件)

    自定义函数:实现文件复制操作有形参(2个) 没有返回值相似版(不用) def copyFile(src,dest): #1.打开两个文件:1个关联读操作,1个关联写操作 fr=open(src,'rb ...

  9. [POI2011]Meteors

    嘟嘟嘟 做了几道题之后,对整体二分有点感觉了. 整体二分的本质就是二分答案.所以这道题二分的就是次数. 然后就是套路了,把小于\(mid\)的操作都添加减去,然后查询,如果查询的值\(x\)比给定值大 ...

  10. 【2018暑假集训模拟一】Day2题解

    T1 园艺工人的求助 [题目描述]终于,在一段繁忙的训练之后,到了NOIP 的举办的时候.同学们坐上了大巴车,享受着沿途的风光,讨论着未解决的问题,憧憬着NOIP 赛场上切题的样子.很快,大巴车到了大 ...