微信小程序 上传头像的实例详解

 更新时间:2017年10月27日 14:42:51   作者:CrazyL1  
这篇文章主要介绍了微信小程序 上传头像的实例详解的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下

微信小程序 上传头像的实例详解

最近在做微信小程序上传头像和上传照片功能就随手写一下代码:

 上传头像html:

<view class="edit-list">
  <text class="list-name list-first">头像</text>
    <view class="edit-righr-bar">
    <image class="head-portrait" src="{{avatar}}" bindtap='changeAvatar'></image>
  </view>
</view>
 

js代码:

// 切换头像
changeAvatar: function () {
var that = this;
// var childId = wx.getStorageSync("child_id");
// var token = wx.getStorageSync('token');
wx.chooseImage({
count: 1, // 最多可以选择的图片张数,默认9
sizeType: ['compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function (res) {
console.log(res.tempFilePaths + "修改页面")
var avatar = res.tempFilePaths;
that.setData({
avatar: avatar,
upAvatar:true
})
 
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
这是是调用上传头像uploadFile方法
// 上传头像
app.uploadimg({
url: 'URL地址',
path: avatar,
header: {
'Content-Type': 'multipart/form-data',
"Authorization": "Bearer " + token
},
isShow: false
});
 
上传头像代码uploadFile做了一个封装 代码放在APP.js里
//多张图片上传
uploadimg:function(data){
var that= this,
i=data.i ? data.i : 0,
success=data.success ? data.success : 0,
fail=data.fail ? data.fail : 0;
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'fileData',//这里根据自己的实际情况改
header: data.header,
formData: {
sequence:i+1
},
success: (resp) => {
success++;
console.log(resp)
console.log(i+"成功");
 
 
}
 
},
fail: (res) => {
fail++;
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
console.log(i);
i++;
if (i == data.path.length) { //当图片传完时,停止调用
console.log('执行完毕');
console.log('成功:' + success + " 失败:" + fail);
 
} else {//若图片还没有传完,则继续调用函数
console.log(i);
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);
}

}
});
},

 uploadFile 提交默认是post方法,后台给的接口的时候需要后台做成post

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 微信小程序 setData的使用方法详解

    微信小程序 setData的使用方法详解

    这篇文章主要介绍了微信小程序 setData的使用方法详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • Google 地图类型详解及示例代码

    Google 地图类型详解及示例代码

    本文主要介绍Google 地图类型,这里整理了Google 地图类型的基本知识资料,并附简单的示例代码便于大家学习参考,希望能帮助有需要的小伙伴
    2016-08-08
  • 接收键盘指令的脚本

    接收键盘指令的脚本

    接收键盘指令的脚本...
    2006-06-06
  • 微信小程序 location API实例详解

    微信小程序 location API实例详解

    这篇文章主要介绍了微信小程序 location API实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 实战程序简易新闻的制作

    微信小程序 实战程序简易新闻的制作

    这篇文章主要介绍了微信小程序 实战程序简易新闻的制作的相关资料,需要的朋友可以参考下
    2017-01-01
  • JavaScript 定时器详情

    JavaScript 定时器详情

    这篇文章主要介绍了JavaScript 定时器,在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法,下面来看看文章的详细介绍
    2021-11-11
  • 详解 TypeScript 枚举类型

    详解 TypeScript 枚举类型

    这篇文章主要介绍了TypeScript 枚举类型,TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好,可以理解枚举就是一个字典,文章内容围绕TypeScript 枚举类型展开内容,需要的朋友可以参考一下
    2021-10-10
  • Typescript类型系统FLOW静态检查基本规范

    Typescript类型系统FLOW静态检查基本规范

    这篇文章主要为大家介绍了Typescript语言的类型系统FLOW静态检查基本规范,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • Javascript作用域与闭包详情

    Javascript作用域与闭包详情

    相信绝大多数同学都听过闭包这个概念,但闭包具体是什么估计很少有人能够说的很详细。说实话闭包在我们平时开发中应该是很常见的,并且在前端面试中闭包也是常见的重要考点,在学习闭包之前我们先来看看作用域与作用域链,因为这是闭包的关键。
    2021-10-10
  • JavaScript 对象管家 Proxy

    JavaScript 对象管家 Proxy

    这篇文章主要为大家介绍了JavaScript对象管家Proxy使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论