微信小程序选择并上传图片
上传图片
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()封装成一个函数,判断图片上传是否完成,如果没有完成,则一直调用这个函数,否则,图片上传完成。
微信小程序选择并上传图片的更多相关文章
- 微信小程序中如何上传图片
本篇文章给大家带来的内容是关于微信小程序中如何上传图片(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.wxml文件 <text>上传图片</text ...
- 微信小程序---选择图片和调用微信拍照
1.实现点击头像按钮实现选择图片或者拍照,将图片重新设置成头像: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello ...
- 微信小程序选择视频,视频上传,视频播放
请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...
- 微信小程序——选择某个区间的数字
很久没有更新文章啦~~记录下今天弄的一个小功能. 先上图: 需求很简单: 第1列改变的时候,第2列也随着改变,并且比第1列大1k. 这里用到了微信的picker 组件,对于不太熟练这个组件的小伙伴可以 ...
- 微信小程序 选择微信自带的地址 用户授权选择了拒绝
// 选择微信自带地址 addAddr:function () { wx.chooseAddress({ success: function (res) { self.setData({ addrIn ...
- 微信小程序选择图片,查看图片信息,浏览图片,图片上传
依次点击链接请查看以下步骤 选择图片: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageob ...
- 微信小程序 --- 选择图片和拍照
wx.chooseImage 选择图片 / 进行拍照 //获取应用实例 const app = getApp() Page({ data: { onOff:true }, btnclick:funct ...
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- 微信小程序-上传照片-多张显示
图片就是一个简单的效果 实现 先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text ...
随机推荐
- Linux 基本概念 & 命令
0. Linux 理解 Linux 是一种操作系统,主要应用于服务器. Linux 性能稳定,其中的许多版本不收费(如CentOS),占用资源较少. 1. 命令行的状态 在 Linux 命令行下以上分 ...
- Python学习--Selenium模块
1. Python学习--Selenium模块介绍(1) 2.Python学习--Selenium模块学习(2) 其他: 1. Python学习--打码平台
- Windows下文件检索的基本姿势
要点 使用FindFirstFile和FindNextFile两个WindowsAPI,并配合链表或队列存储文件夹序列. C++源码(链表存储) #include <iostream> # ...
- MySQL数据库的安装与基本操作
实验要求: 1.安装mysql源码包,并做相关的配置和优化路径,启动服务. 步骤: 1)先查询MySQL软件的安装情况,如果有建议将其卸载, 2)安装光盘自带的ncurses-devel包. 3)My ...
- [LOJ 6031]「雅礼集训 2017 Day1」字符串
[LOJ 6031] 「雅礼集训 2017 Day1」字符串 题意 给定一个长度为 \(n\) 的字符串 \(s\), \(m\) 对 \((l_i,r_i)\), 回答 \(q\) 个询问. 每个询 ...
- Q矩阵输出
程序启动时: 1.Q矩阵在InitQX中对角阵赋初值为0.25,GPS卫星数6 2.Q矩阵初值在初始化时由GetBL获得,改变Q对角阵 Q初值第0个卫星 10000000000.000 X初值第0个卫 ...
- 【Alpha 冲刺】 3/12
今日任务总结 (未完成) 人员 今日原定任务 完成情况 遇到问题 贡献值 胡武成 完成API文档编写 已完成App端api,Web端api还在持续 时间紧 孙浩楷 理解掌握在线编辑插件使用 加深了对所 ...
- 【Android自动化】在使用uiautomator框架自动化时,往往有时再运行脚本时发现xxx实例属性不被允许
例如: # -*- coding:utf-8 -*- from uiautomator import device as d d(classname="android.widget.List ...
- Angular简介与程序架构
什么是angularJs 基于javascript开发的客户端应用框架,使我们可以更加快捷,简单的开发web应用. 诞生于2009年,后来被google收购,用在了很多项目中. 适用于CRUD应用或者 ...
- Could not find class com.google.gson.Gson
在Android开发中使用gson解析json字符串,出现异常:java.lang.classnotfoundexception:com.google.gson.Gson.解决方案如下: 这个异常的怪 ...