码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2020-07-14 16:27:35      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:www   let   actions   token   ret   object   response   var   链接   

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

 

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

标签:www   let   actions   token   ret   object   response   var   链接   

原文地址:https://www.cnblogs.com/liangqilin/p/13299577.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!