微信小程序选择和上传图片

选择和上传图片用到的api：
wx.chooseImage() 和 wx.uploadFile()

具体实现代码如下：

wx.chooseImage({count: 6, // 最多可以选择的图片张数 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {console.log(res.tempFiles); // 图片的本地文件列表，每一项是一个file对象// 结果: [{path:"http://tmp/wxad2ee6fa2df2c46d.o6zAJszl2EyKr49sBQVYJ4M589UU.4jSXH6CUBJ2Of794f4e60500fa69c84200e628f92f29.gif"
size: 541769}, ...]console.log(res.tempFilePaths); // 图片的本地文件路径列表// 结果: ["http://tmp/wxad2ee6fa2df2c46d.o6zAJszl2EyKr49sBQVYJ4M589UU.4jSXH6CUBJ2Of794f4e60500fa69c84200e628f92f29.gif"]var tempFilePaths = res.tempFilePaths;wx.uploadFile({ url: '/your_url/receive_file', // 图片上上传的地址，请求方式默认为POST且不可更改filePath: tempFilePaths[0], // 要上传的文件的路径，注：一次只能上传一个文件，若要上传多张图片，请使用递归name: 'file', // 文件对应的键名，后端可以通过这个key获取到文件的二进制内容formData:{'user_id': '149','name': 'Alma','age': 18},success: function(res){var data = res.data//do something}})}
})

如果需要上传多张图片，那么需要把wx.uploadFile()封装成一个函数，判断图片上传是否完成，如果没有完成，则一直调用这个函数，否则，图片上传完成。

官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

微信小程序选择和上传图片相关推荐

微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序：限制上传图片大小
微信小程序:限制上传图片大小 page({data:{Size:2*1024*1024,//定义大小}, )} //限制上传图片大小(2M)for(let i=0;i<res.tempFiles ...
微信小程序选择视频，获取封面缩略图
使用微信小程序选择视频,且获取其封面使用微信小程序选择视频上传,且获取其封面背景名词参考效果图展示结束: 使用微信小程序选择视频上传,且获取其封面背景又一活儿,要从小程序里选择视频,上 ...
微信小程序 - 选择图片、预览图片、删除图片
为什么80%的码农都做不了架构师?>>> 小程序开发中你可能会遇到上传的图片首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式. 微信 ...
微信小程序wx.uploadFile 上传图片慢优化
背景: wx.uploadFile 上传图片前端显示5-10s,后端日志显示不超过1s. Web端同样的接口上传同样的图片170k左右,前后端日志显示均不超过1s. 推测是wx.uploadFile造 ...
微信小程序选择地址填写详细地址定位地点
感觉自己做了一个没有意义的东东,选择地址填写详细地址就可以找到那个地方. 如下图所示首先需要一个写好的城市选择器,你可以自己写,也可以私信我h(￣▽￣)~* 这是外部引入的组件 <area_p ...
微信小程序选择图片（相册中选择/相机拍摄）
微信小程序中关于选择函数有专门的函数: wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照. 参数 Object object 属性类型默认值必填说明 ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
微信小程序选择手机相册里的图片并上传到页面
微信小程序获取手机相册里的图片并传到页面上 index.wxml代码 // 相册中的照片 <button bindtap='handleChooseAlbum'>选中图片</butt ...

微信小程序选择和上传图片

文章目录

微信小程序选择和上传图片

微信小程序选择和上传图片相关推荐

最新文章

热门文章