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

于今腐草无萤火，终古垂杨有暮鸦。这篇文章主要讲述uni-app 更换用户头像功能-涉及图片的预览选择相关的知识，希望能为你提供帮助。
原文链接：https://www.jianshu.com/p/8b1460ed549e

需求: 用户可以预览当前头像, 可以从本地上传
点击图片出现操作菜单
操作菜单api
预览图片api
选择图片api

< view @click="changeAvatar"> < image class="avatar" src="https://www.songbingjia.com/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="https://www.songbingjia.com/android/fileUrl" class="image"> < /image> < /view> data() { return { fileUrl: ‘‘ } }, onLoad(event) { // event事件内有上一个页面传递过来的参数 let fileUrl = event.fileUrl this.fileUrl = fileUrl

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