精华内容
下载资源
问答
  • 微信小程序上传头像
    2021-07-02 18:18:06

    这一篇主要说头像 上传,以及修改保存的功能。本章节主要用的知识点有

    1. wx.chooseImage 从本地相册选择图片或使用相机拍照。

    2.wx.uploadFile 将本地资源上传到服务器.

    3. 修改原来的小程序头像并保存,调用后台接口修改操作

    我这里也贴出来了,不够详细可以去官网看。

    1、选择图片接口

    wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。

    OBJECT参数说明:

    参数类型必填说明

    count

    Number

    最多可以选择的图片张数,默认9

    sizeType

    StringArray

    original 原图,compressed 压缩图,默认二者都有

    sourceType

    StringArray

    album 从相册选图,camera 使用相机,默认二者都有

    success

    Function

    成功则返回图片的本地文件路径列表 tempFilePaths

    fail

    Function

    接口调用失败的回调函数

    complete

    Function

    接口调用结束的回调函数(调用成功、失败都会执行)

    success返回参数说明:

    参数类型说明最低版本

    tempFilePaths

    StringArray

    图片的本地文件路径列表

    tempFiles

    ObjectArray

    图片的本地文件列表,每一项是一个 File 对象

    我这里先贴官方是例子出来。

    wx.chooseImage({
    count: 1, // 默认9

    sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有

    sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有

    success: function (res) {
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

    var tempFilePaths = res.tempFilePaths

    }

    })

    View Code

    第二步:

    2、上传图片接口 wx.uploadFile(OBJECT)

    将本地资源上传到开发者服务器。我们通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中content-type 为multipart/form-data 。

    OBJECT参数说明:

    参数类型必填说明

    url

    String

    开发者服务器 url

    filePath

    String

    要上传文件资源的路径

    name

    String

    文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容

    header

    Object

    HTTP 请求 Header, header 中不能设置 Referer

    formData

    Object

    HTTP 请求中其他额外的 form data

    success

    Function

    接口调用成功的回调函数

    fail

    Function

    接口调用失败的回调函数

    complete

    Function

    接口调用结束的回调函数(调用成功、失败都会执行)

    success返回参数说明:

    参数类型说明

    data

    String

    开发者服务器返回的数据

    statusCode

    Number

    开发者服务器返回的 HTTP 状态码

    官方实例代码:

    wx.chooseImage({
    success: function(res) {
    var tempFilePaths = res.tempFilePaths

    wx.uploadFile({
    url: ‘https://example.weixin.qq.com/upload‘, //仅为示例,非真实的接口地址

    filePath: tempFilePaths[0],

    name: ‘file‘,

    formData:{
    ‘user‘: ‘test‘

    },

    success: function(res){
    var data = res.data

    //do something

    }

    })

    }

    })

    是否看到这里对选择图片和上传的接口了解很多,

    第三步:代码实现

    接下来这里就是真正的操作代码,为了大家方便看,我这里都注释了代码:

    没修改之前。                                                           修改后并保存数据库

    这里的样式自已调

    头像

    js模块,

    注意:

    wx.uploadFile自已有一个this,我们格外定义的var _this = this 到时候赋值的时候把this带进来就OK了。

    //点击图片选择手机相册或者电脑本地图片

    changeAvatar: function(e) {var _this = thiswx.chooseImage({
    count:1,//默认9

    sizeType: [‘original‘, ‘compressed‘],//可以指定是原图还是压缩图,默认二者都有

    sourceType: [‘album‘, ‘camera‘],//可以指定来源是相册还是相机,默认二者都有

    success: function(res) {//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

    var tempFilePaths =res.tempFilePaths;//这里是上传操作

    wx.uploadFile({
    url: getApp().globalData.clientUrl+ ‘/uploadAvatarUrl‘, //里面填写你的上传图片服务器API接口的路径

    filePath: tempFilePaths[0],//要上传文件资源的路径 String类型

    name: ‘avatar‘,//按个人情况修改,文件对应的 key,开发者在服务器端通过这个 key 可以获取到文件二进制内容,(后台接口规定的关于图片的请求参数)

    header: {"Content-Type": "multipart/form-data"//记得设置

    },

    formData: {//和服务器约定的token, 一般也可以放在header中

    ‘session_token‘: wx.getStorageSync(‘session_token‘)

    },

    success:function(res) {//当调用uploadFile成功之后,再次调用后台修改的操作,这样才真正做了修改头像

    if (res.statusCode = 200) {//var data = res.data

    //var statusCode = res.statusCode

    //console.log("返回值1" + data);

    //console.log("返回值2" + statusCode)

    //这里调用后台的修改操作, tempFilePaths[0],是上面uploadFile上传成功,然后赋值到修改这里。

    wx.request({
    url: getApp().globalData.clientUrl+ ‘/update?avatar=‘ + tempFilePaths[0], //真正修改操作,填写你们修改的API

    header: {‘content-type‘: ‘application/json‘,

    },

    method:‘POST‘,

    success:function(res) {if (res.data.code == 200) {
    wx.showToast({
    title:‘修改成功‘,

    icon:‘success‘,

    duration: 2500})//wx.uploadFile自已有一个this,我们刚才上面定义的var _this = this 把this带进来

    _this.setData({"user.avatar": tempFilePaths[0]

    });

    }

    },

    })

    }

    }

    })

    }

    })

    },

    这样就实现了修改小程序的头像了,希望帮到正在奋斗的你,遇见更好的你。

    这篇文章哪里还不足的话,希望路过的大神指点指点小弟。
    ————————————————
    版权声明:本文为CSDN博主「Lindsay Zou」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_28688385/article/details/114017544

    更多相关内容
  • 主要介绍了微信小程序 上传头像的实例详解的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下
  • 参照 这篇文章中的思路实现了头像裁剪。 在 pages/constant.js 中可以修改裁剪框尺寸,支持矩形。 在微信开发者工具中预览效果。 实现时需要注意的问题 movable-view 的 damping 需要设得很大,比如 1000 ,否则...
  • 主要介绍了Thinkphp5微信小程序获取用户信息接口的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 小程序中一般使用用户的微信头像作为其小程序头像,但有时用户不用微信头像,我们就要提供可更改的方法。 完成这项功能需要两个微信官方的api wx.chooseImage和wx.uploadFile wx.chooseImage: wx.chooseImage({ /...

    在小程序中一般使用用户的微信头像作为其小程序头像,但有时用户不用微信头像,我们就要提供可更改的方法。
    完成这项功能需要两个微信官方的api
    wx.chooseImage和wx.uploadFile

    wx.chooseImage:

    wx.chooseImage({  //从本地相册选择图片或使用相机拍照
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
      	//这里res中会有一个tempFilePaths,在微信小程序中暂时能用,不能一直使用
      }
    

    在这里插入图片描述

    chooseImage的res中会有一个tempFilePaths,在微信小程序中暂时能用,不能一直使用,我们需要永久的储存他,这就用到我们的第二个api:wx.uploadFile
    wx.uploadFile是用来把用户选择的图片存到我们的后台服务器中的。

    wx.uploadFile({
      url: `我们的接口路径`,
        filePath: '刚才的临时路径tempFilePaths',
        name: 'file',
        success: function (res) {
          console.log(res)
          //上传成功后使用后台返回的图片路径
          this.setData({
          	src:res.data.url
          });
          
        }
      })
    
    展开全文
  • 添加头像微信小程序 功能 选择当前头像或本地图片进行合成 自动支持任意数量的头像框模版 支持对头像原图进行缩放操作 自定义 修改小程序项目信息 将index.js中const urls中内容替换相框图片的url 将index.wxml中...
  • 工具类微信小程序源码,整套源码,可以直接搭建使用。如果会基础的小程序开发,可以进行修改,增删,以及页面的制作学习。
  • 微信小程序|如何更换头像

    千次阅读 2020-07-11 00:03:00
    欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。欢迎加入团队圈子!与作者面对面!直接点击!问题描述在使用...

    欢迎点击「算法与编程之美」↑关注我们!

    本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

    欢迎加入团队圈子!与作者面对面!直接点击!

    问题描述

    在使用小程序的时候,注册个人账号通常会有要更换个人头像的情况,那么这个上传图片文件更换头像的过程该如何实现呢?

    效果图:


    解决方案

    1)wxml配置

    wxml中要配置一个bindtap绑定事件headimage;以及对要作为头像的图片进行head的数据绑定进行配置。

    代码如下:

    <view>  

    <image  bindtap="headimage" src='{{head}}'></image> 

    <view  mode="aspecFill"  bindtap="headimage">点击更换头像</view>

    </view>

     (2)wxss配置

    wxss中只需要配置所需的头像边框形式(border-radius)、颜色以及图文大小、位置即可。代码如下:

    .v1{

      display:  flex;

       flex-direction: column;

       align-items: center;

    }

     

    .head {

       margin-top: 30rpx;

      width:  200rpx;

      height:  200rpx;

       border-radius: 50%;

      border:  1px solid dimgrey;

    }

     

    .text {

       line-height: 50rpx; 

      color:  lightgray; 

       font-size: 35rpx; 

    }

     (3)js配置

    js中配置绑定对数据内容或已绑定的事件处理函数。head数据配置初始呈现头像图片,headimage作为事件处理函数中使用一个API wx.chooseImage来从本地相册选择图片或使用相机拍照。

    代码如下:

    data{

       showModal: false,

      head:  "/images/touxiang.jpg",

      },

      // 点击更换手机相册或者电脑本地图片   

       headimage: function () {

        var  _this = this;

         wx.chooseImage({

           count: 1, // 默认9     

           sizeType: ['original', 'compressed'],

          // 指定是原图还是压缩图,默认两个都有     

           sourceType: ['album', 'camera'],

          // 指定来源是相册还是相机,默认两个都有   

           success: function (res) {   

             _this.setData({

               head: res.tempFilePaths

            })

          }

        })

      },

    结语

    更换头像是小程序日常使用非常普遍的操作,应用广泛值得掌握,但是本次配置存在的不足时更换头像之后无法保存的问题。请持续关注,后续会继续改进。

    END

    主  编   |   王楠岚

    责  编   |   吴怡辰

     where2go 团队


       

    微信号:算法与编程之美          

    长按识别二维码关注我们!

    温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

    展开全文
  • 微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作。下面介绍一下...
  • Uni-app 微信小程序头像上传

    千次阅读 2020-05-25 06:46:25
    需求是想将图片转为base64格式后上传服务器,经多方查找,找到了微信提供的Api方法 wx.getFileSystemManager()。 wx.getFileSystemManager wx.FileSystemManager.readFile() 方法可以提供的本地文件路径、读取本地...

    uni-app 提供了很多图片处理的Api,比如 uni.chooseImage()方法,但基本都是本地、拍照上传,本地临时、持久存储,要想跟服务端交互,就需要使用上传Api uni.uploadFile()。但项目需求是想将图片转为base64格式后上传,经多方查找,找到了微信提供的Api方法 wx.getFileSystemManager()。

    wx.getFileSystemManager

    wx.FileSystemManager.readFile() 方法可以根据提供的本地文件路径来读取本地文件内容,这正好符合项目需求,查看 uni-app Api 文档,也有实现这个方法 uni.FileSystemManager.readFile() ,但不知是否已经支持。经体验版测试,功能效果跟微信Api一致。

    /*
     * 上传头像
     * 注:使用vscode编辑器时,会有报错提醒,可忽略
     */
     public chooseImage(): any {
        if (this.state) {
          return false;
        }
        this.state = true;
        uni.chooseImage({
          count: 1,
          sizeType: 'compressed',
          success: (res: any) => {
            this.state = false;
            if (res.tempFiles[0].size >= 200000) {
              uni.showToast({ title: '请上传低于200K的图片', icon: 'none', duration: 2000 });
              return false;
            }
            uni.compressImage({
              src: res.tempFilePaths[0],
              quality: 0,
              success: (res) => {
                uni.getFileSystemManager().readFile({
                  filePath: res.tempFilePath, // 选择图片返回的相对路径
                  encoding: 'base64', // 编码格式
                  success: async (res: any) => {
                    this.userInfoData.headImg = 'data:image/png;base64,' + res.data;
                  }
                });
              }
            });
          },
          fail: (err: Error) => (this.state = false)
        });
      }
    
    展开全文
  • 微信小程序生成头像

    千次阅读 2020-11-27 11:24:41
    校庆头像生成,圣诞头像生成,国庆头像生成。 实现自己选择图片,根据用户微信头像生成图片。 能通过微信代码审查,调用微信小程序珊瑚安全API。
  • 适应场景:用户上传、修改头像等等 //上传头像 upShopLogo () { wx.chooseImage({ count:1, //一次上传的数量 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], // album 从相册选图...
  • 在9月25日,我心血来潮决定在国庆前开发一个换头像微信小程序为祖国70周年献礼!最终在国庆前夕上线发布了制作头像的小程序-【海豚趣图】,帮助10000多名小伙伴成功换上了国旗头像。小程序虽然已经上线,但在...
  • 微信小程序头像

    千次阅读 2018-04-18 14:36:10
    效果图:   先上HTML: &lt;view class="list-menu"&gt; &lt;view class="navigator" bindtap='changeHead'&...头像&lt;/text&gt;&lt;/view&
  • 从抽奖转盘的图中我们可以看出,抽奖转盘由外圆、扇面抽奖选项、抽奖按钮组成,其中外圆不难实现,大家在处理微信小程序头像的时候估计都已经用过了,那就是利用border-radius:50%来将一个正方形变成圆,这是外圆...
  • 找到对应文件,并导入小程序中 文件中核心模块 4. 页面中使用 //wxml <import src="../../we-cropper/we-cropper.wxml"/> // 导入模板 <view class="cropper-wrapper"> <template is="we-...
  • 微信小程序获取用户头像和昵称

    千次阅读 2022-03-18 15:28:04
    由于微信回收了open-data,头像返回了默认头像,昵称返回了微信用户,大家都骂骂咧咧的把getUserInfo改成了getUserProfile,getUserProfile这个api需要tap才能触发,不能再直接在onload和onshow直接调用函数了。...
  • 仿糗事百科微信小程序 1. 实现顶部页签菜单左右滑动效果 2. 实现顶部页签菜单切换效果,页签菜单选中时字体加粗,同时对应的内容也跟着变化 3. 实现专享界面糗事列表设计,包括发布人头像、发布人昵称、发布的段子等...
  • 这是一款特别强大的一款微信小程序源码,初步算了一下,该款小程序目前包含了几十个功能。 具体功能如以下: 游戏扫码登录; 王者战力查询; 改名生成(多种生成方式); 头像框制作(N 款模板); 王者巅峰数据查询; ...
  • 首先,在微信官方更新授权操作之前,我们一直使用getUserInfo来获取微信用户的头像和昵称以及openid,这个可以参考我的上一篇博客(使用getUserInfo获取用户头像),但是微信官方弃用getUserInfo之后,我们获取头像...
  • 微信小程序,虽然目前还不知道其在微信的接入口,但应该和订阅号、服务号以及企业号会有所不同。搜索打开使用,用完关闭,没有移动app的安装、下载等过程,微信流量大,轻便、易用等特性是其优点。然而正是因为这个 ...
  • 对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的 导入初始项目 打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示...
  • 我想说的是 ,在真机上可能不行,但是在体验版和pc端,小程序手机调试都可以,看看正式上行不行,与做法无关,可能是接口问题,因为我换另外一个上传图片的接口是在真机上也可以的.   转载于:...
  • 一、子组件,通过插件更改头像裁剪头像上传裁切/剪切组件 - DCloud 插件市场 <template> <view class="container"> <view class="page-body uni-content-info"> <view class='...
  • 废话不多说,直接看效果: (此图片来源于网络,如有侵权,请联系删除! ) 效果一: 代码如下:   <image class='zhuboIcon' src='../../image/video-list/avater.jpg'></image> 东辰-寒冰 ...
  • 微信小程序用户头像编辑上传

    千次阅读 2019-03-28 09:01:51
    微信小程序用户头像编辑上传 近期接触了一个小程序项目
  • 微信小程序-更换头像

    千次阅读 2019-07-30 23:43:32
    -- 更换头像 --> <view class="updown-image" bindtap='upload'> <view class="personal-img"> <image src="{{head}}" mode="aspecFill"></image> </view> ...
  • 由于展示个人信息的时候需要放上个人头像,所以为了更好的用户体验要有修改个人头像的功能。 最开始,打算使用uview的upload组件,结果发现总是有右上角的关闭和下方的进度条,非常丑。想到正常的个人信息下修改的...
  • 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3.通过微信接口把code换取成openid 4.后端将openid作为用户名和密码 5.后端通过JSON web token方式登录,把token和用户id...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,579
精华内容 2,631
关键字:

微信小程序修改头像

微信小程序 订阅