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