uni-app + uview 头像更换与头像预览

实现效果

一.在template中写你需要实现的头像样式

 <view @click="chooseAvater">
	<image :src='imgArr[0]'></image>
 </view>

1.uview操作菜单

 <!-- 头像弹窗 -->
	<u-action-sheet :list="lists" v-model="chooseAvaters" @click="editAvater"></u-action-sheet>

二.在data中定义一些字段

chooseAvaters: false, // 操作菜单的显示隐藏
	  lists: [  // 操作菜单的列表内容
	    {
	      text: '更换头像',
	      color: '',
	      fontSize: 28,
	    },
	    {
	      text: '查看大图',
	      color: '',
	      fontSize: 28,
	    }
	  ],

三.在methods中写实现的逻辑

1.操作菜单的显示与选中

 chooseAvater() {
		  this.chooseAvaters = true
	  },
	  editAvater(index) {
		  if (index === 0) {
			  this.chooseImage()
		  } else {
			  this.previewImage()
		  }
	  },

2.上传图片

 chooseImage (){
	     uni.chooseImage({
	        count:1,//限制图片上传数量，封顶9张
	        success:(res)=>{//拿到图片的返回数据
	        this.imgArr = res.tempFilePaths
	        }
	    })
	},

3.图片预览

previewImage(){
	    uni.previewImage({
	        urls: [this.imgArr[0]],//拿头像地址
	    })
	 },