要上传图片，小程序首先要知道它的属性值，在https://developers . weixin . QQ.com/mini program/dev/API/media-picture . html中有详细描述。

今天主要讲一下如何上传图片和压缩图片，了解以下属性值

先看页面显示(点击上传图片，从相册中选择，上传图片后再次点击上传)

来吧，来吧，编码它

Wxml代码

Button bindtap='chooseImageTap '上传图片/button bind tap=' save image '保存/button canvas style=' width : 300 px；' height: 200px'Canvas-id='myCanvas'/canvas当然最重要的还是js代码

var app=GetApp()Page({ data : { logo : null，pics:[] }，chooseimagetap : function(){ let _ this=this；wx . showactionsheet({ item list :['从相册中选择'，'拍照']，//下面显示的数组是拍照还是另一个itemColor: '#f7982a '，//显示的文本颜色成功：函数(res) {if(！Res.cancel) {//选择judge if (res. tapindex==0) {_ this。choosewx image('相册')} else if (res. tapindex==1) {_ this。choose wx image(' camera ')} } })；//在画布上绘制图片选择wximage:函数(类型){ const CTX=wx . createcanvascontext(' my canvas ')//canvas var=this；Wx.chooseImage({//上传图片事件count: 9，//quantity sizetype 3360[' original '，' compressed']，//original original image，compressed compressed image，默认情况下两者都有sourceType: ['相册']。相机']，//相册从相册中选择图片，相机使用相机。默认情况下，两者都有成功：函数(RES){ console . log(RES)CTX . draw image(RES . tempfile path[0]，0，0，100，100)//第一个被成功选择。最后四个值是左、上、宽和高，它们控制画布上图片的位置和大小。CTX。draw ()}})}，save image : function(){//这里触发图片上传的方法是var pics=this . data . pics；App.uploadimg ({url:' https://.//这里是上传图片的接口路径： pics//这里是选中图片的地址数组})；}，摘要

以上是边肖介绍的微信小程序中上传图片并压缩的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！