上传照片到缓存
这里实现上传本地照片/拍摄照片并上传显示到当前页面的功能,主要对JS文件分析
STEP1实现选择本地相册/拍摄功能
wxml内绑定choosWay
函数:
<image class="upload-picture" wx:if="{{!uploadSuc}}" mode="widthFix" src='../../img/upload.jpg' bindtap='chooseWay'></image>
chooseWay
函数实现:
// 弹窗显示照片提交方式
chooseWay: function() {
let that = this;
wx.showActionSheet({ // 引入弹窗
itemList: ['从相册中选择','拍照'],
itemColor:"#f7982a",
success: function(res) {
// 根据弹窗中对应的选项返回调用wx.chooseImage时所需要的类型
if (!res.cancel) {
if(res.tapIndex==0) {
that.chooseWxImage('album') //从相册中选择
} else if(res.tapIndex==1) {
that.chooseWxImage('camera') // 拍摄
}
}
}
})
},
STEP2获取照片
//获取照片
chooseWxImage:function(type) {
let that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
// 此时可以通过下面的方式获取到上传的照片的路径
var tempFilePaths = res.tempFilePaths;
// 设置当前的图片路径
that.setData({
img_path: res.tempFilePaths[0],
uploadSuc: true,
})
},
})
},
这里要特别注意,如果需要在wx.chooseImage
(或其他微信小程序接口函数内)对this.data
数据进行更改时,需要在该函数外let that = this
。这与JS一样,如果在接口内直接使用this,this指代的是当前借口内的函数。
STEP3用wxml显示图片
<image class="upload-picture" wx:if="{{uploadSuc}}" mode="widthFix" src="{{img_path}}"></image>
实现结果: