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

Posted 2020-12-16 慕雪琳鸢

原文链接：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