vue app拍照并裁剪上传——(步骤一)

<template>
	<div class="userImg" @click="uploadImg">
		<div class="imgCont">
			<div>头像</div>
			<div>
				<img :src="user_image" alt="">
				<i class="iconfont icon-xia1-copy-copy"></i>
			</div>
		</div>
	</div>
	<!-- 底部弹窗选择拍照还是选择相册 -->
		<van-action-sheet v-model="userImg_show" :actions="actions" cancel-text="取消" @select="onSelect">
		</van-action-sheet>
		
</template>

<script>
data() {
			return {
				user_image:"../../../static/home/banner.png",
				userImg_show: false,
				actions: [{
						name: '拍摄',
						value: 0
					},
					{
						name: '从相册选择',
						value: 1
					}
				]
			}
		},
		methods: {
			uploadImg() {
				this.userImg_show = true
			},
			onSelect(item) {
				if (!item.value) { //相机
					//关闭弹窗
					this.userImg_show = false
					//调用相机
					let cmr = plus.camera.getCamera();
					// 拍照操作
					cmr.captureImage((path)=>{
						// 读取本地文件
						// plus.io.resolveLocalFileSystemURL(path,(entry)=>{
						// 	this.user_image = entry.toLocalURL()
						// 	console.log(entry)
						// 	console.log(entry.toLocalURL())
						// 	// this.$store.commit("changeImg",entry.toLocalURL())
						// })
						//读取图片
						plus.io.getImageInfo({
							src:path,
							success:(img)=>{
								console.log(img,'读取图片信息')
								//将拍好的照片路径缓存到vuex,裁剪页使用
								this.$store.commit("changeImg",img.path)
								//跳转到裁剪页
								this.$router.push({
									name:'Cropper'
								})
							}
						})
					},function(e){//失败回调
						console.log('fail'+e)
					},function(options){//结束回调
						console.log(options)
					});
				} else { //相册
					this.userImg_show = false
					plus.gallery.pick((path)=>{
						//读取图片
						plus.io.getImageInfo({
							src:path,
							success:(img)=>{
								console.log(img,'读取图片信息')
								this.$store.commit("changeImg",img.path)
								this.$router.push({
									name:'Cropper'
								})
							}
						})
					})
				}
			},
</script>