微信小程序 关于头像上传，showActionSheet，chooseImage，uploadFile
微信小程序关于头像上传以及相关的几个API（showActionSheet，chooseImage和uploadFile）
近期参与一个微信小程序的开发，有关于上传头像的需求。在实现后，想写下博客记录一下，也希望能帮到有需要的朋友。
效果预览
点击该区域，可以弹出菜单选择
js代码
changeAvatarSheet函数
// About Change Avatar of users// 1.换头像的途径菜单 wx.showActionSheet,选择菜单// 调用wx.showActionSheet，作选择菜单changeAvatarSheet: function () {var that = this;wx.showActionSheet({itemList: ['从相册中选择', '拍照'],itemColor: "#f7982a",success: function (res) {if (!res.cancel) {if (res.tapIndex == 0) {//从相册中选择// console.log(res.tapIndex);// 调用函数that.chooseWxImageShop('album');} else if (res.tapIndex == 1) {//手机拍照// console.log(res.tapIndex);// 调用函数that.chooseWxImageShop('camera');}}}})},chooseWxImageShop函数
// 2.换头像 wx.chooseImage// 3.上传头像到数据库 wx.uploadFilechooseWxImageShop: function (type) {var that = this;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: [type],success: function (res) {const tempFilePaths = res.tempFilePathswx.uploadFile({filePath: tempFilePaths[0],name: 'avator',url: 'url',header: {'content-type': 'multipart/form-data','X-AUTH-TOKEN': wx.getStorageSync('token')}, // 设置请求的 headerformData: {// 'content-type': 'multipart/form-data',// 'user_id': '201825010512',// 'filePath': tempFilePaths[0],},success(res) {// const data = res.datavar data = JSON.parse(res.data)console.log(res.data)//do something// that.setData({// app.globalData.userInfo.avatarUrl: data.face_url// });console.log(data.face_url)app.globalData.userInfo.avatarUrl=data.face_urlconsole.log(app.globalData.userInfo.avatarUrl)wx.showToast({title: '上传成功',})},fail: function (res) {wx.showToast({icon: 'none',title: '上传失败',})console.log(tempFilePaths[0])}})}})},经过与后台数据库实测，可以上传更新用户的头像。
主要涉及的API有wx.showActionSheet,wx.chooseImage,wx.uploadFile，分别是弹出选择菜单，选择图像，上传文件。注意函数之间的调用关系。
微信小程序 关于头像上传，showActionSheet，chooseImage，uploadFile相关推荐
- uniapp 微信小程序开发 图片上传压缩
uniapp 微信小程序开发 图片上传压缩 安卓上传图片并压缩 思路 全部代码 安卓上传图片并压缩 由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
- php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...
- 微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html <!--pages/demo4/demo4.wxml--> <view class="cont ...
- 微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器 微信小程序中实现上传视频的开发代码 易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
- Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示 背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
- 微信小程序实现录音上传
微信小程序实现录音上传 准备 开始 准备 1.微信开发者工具 2.Api文档 开始 打开微信开发者工具 项目->新建项目 选择小程序 appid是在微信公众平台申请的. 链接 新建完成后,项目自 ...
- 微信小程序媒体文件上传到微信服务器
微信小程序媒体文件上传到微信服务器官方给出的事例如下: curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/up ...
- 微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片 发布时间:2021-04-16 18:05:52 来源:亿速云 阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
- 微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
- php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
最新文章
- SQL Server 一些使用小技巧
- webpack 读取文件变量
- IDC机房运行安全评测怎么做，自建IDC机房评测材料准备要点
- 小程序 数据库 时间_使用云开发数据库构建更生动的小程序
- 异常处理_月隐学python第19课
- HTML期末大作业-小米商城
- Retroifit原理
- HTML5:一个拖拽网页元素的例子
- Python基础笔记(四)切片、列表生成式、迭代
- ①编写一个程序，实现文件的复制。②写一个加密程序，对文件1.txt进行加密。它从输入流中读入一个密钥，并将文件密文输出。③ 编写一个应用程序,向数据文件out.dat中输入100个1000以内的随机整
- 这一篇彻底说清楚了！乐高，编程，机器人到底要不要学？
- Error in network defenition etc/netplan/01-netcfg.yaml line 0 collumn 8: expected mapping.
- 时制转换时的电话账单
- 小数的二进制与十进制转换
- 简洁易用报表工具-丰富可视化效果web报表工具
- JavaScript网页滚动距离
- putty下载链接提供
- Disk Manager — 可视化的硬盘分区对象
- HDU 5914 - Triangle
- keep-alive：