uni-app 更换用户头像功能-涉及图片的预览 选择

原文链接：https://www.jianshu.com/p/8b1460ed549e

 

需求: 用户可以预览当前头像, 可以从本地上传

点击图片出现操作菜单

操作菜单api
预览图片api
选择图片api

<view @click="changeAvatar"> <image class="avatar" src="../../static/1.png"></image> </view> changeAvatar(){ uni.showActionSheet({ // itemList按钮的文字接受的是数组 itemList: ["查看头像","从相册选择图片"], success(e){ var index = e.tapIndex if(index === 0){ // 用户点击了预览当前图片 // 可以自己实现当前头像链接的读取 let url = "../../static/1.png" let arr=[] arr.push(url) uni.previewImage({ // 预览功能图片也必须是数组的 urls: arr }) }else if(index === 1){ // 用户点击了从图库上传 uni.chooseImage({ count: 1, sizeType: ["compressed"], success(response) { // 选择图片后, 返回的数据 var fileUrl = response.tempFilePaths[0] uni.navigateTo({ // 跳转到图片处理页面,并将图片地址通过参数传递过去 url: "/pages/meface/meface?fileUrl="+fileUrl }) } }) } } }) 

meface页面

<view class="main"> <image :src="fileUrl" class="image"></image> </view> data() { return { fileUrl: '' } }, onLoad(event) { // event事件内有上一个页面传递过来的参数 let fileUrl = event.fileUrl this.fileUrl = fileUrl