微信小程序之使用相机拍照图片预览并上传云存储
+ 调用相机组件,拍摄图片+ 拍摄的图片能够显示在下方+ 点击图片能够预览+ 点击按钮上传到云存储+ 上传完成后有相应的提示信息
·
- 调用相机组件,拍摄图片
- 拍摄的图片能够显示在下方
- 点击图片能够预览
- 点击按钮上传到云存储
- 上传完成后有相应的提示信息
一、效果图
二、代码
index.wxml
<camera></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<image mode="widthFix" src="{{src}}" bindtap="see" ></image>
<button type="primary" bindtap="upload">上传</button>
index.js
Page({
data:{
src:null
},
takePhoto:function(e) {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
console.log(this.data.src)
}
})
},
error(e) {
console.log(e.detail)
},
see:function(e){
var current = e.currentTarget.dataset.src;
console.log(current);
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: [this.data.src],
})
},
upload:function(e){
wx.cloud.uploadFile({
cloudPath: 'photo/one.jpg', // 上传至云端的路径
filePath: this.data.src, // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
wx.showToast({
title: '上传成功',
icon:'success'
})
},
fail: console.error
})
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)