《微信小程序开发》课件——第4章 微信小程序常用API（上）_102-136.pdf

03【案例4-3】头像上传下载

案例分析

头像上传下载是微信小程序开发中常见的一个功能，

一般会出现在用户中心模块中，用于设置用户的头

像。“头像上传下载”微信小程序的页面效果如右

图所示。

案例分析

“头像上传下载”微信小程序展示了头像信息，并提供了3个按钮，依次为“更改头

像”“头像上传”“头像下载”。

l点击“更改头像”按钮，可以重新选择头像图片；

l点击“头像上传”按钮，可以将头像上传到服务器；

l点击“头像下载”按钮，可以从服务器中下载头像图片并预览。

知识储备

1.选择媒体API

先定一个小

目标！

掌握选择媒体API，能够运用

wx.chooseMedia()方法选择图片或视

频

知识储备

1.选择媒体API

什么是选择媒体API?

知识储备

1.选择媒体API

微信小程序提供了选择媒体API，其用于选择图

片或视频，一般用于上传头像、上传照片和上传

视频等功能中。

通过调用wx.chooseMedia()方法即可使用选择

媒体API，该方法执行后，会提示用户拍摄图片

或视频，或从手机相册中选择图片或视频。

知识储备

1.选择媒体API

wx.chooseMedia()方法的常用选项如下表所示。

选项类型说明

countnumber最多可以选择的文件个数，默认值为9

mediaTypeArray.string文件类型，默认值为[image,video]

sourceTypeArray.string图片和视频选择的来源，默认值为[album,camera]

拍摄视频最长拍摄时间，单位秒。时间范围为3~60秒之间。

maxDurationnumber

不限制相册，默认值为10

仅在sourceType为camera时生效，可设置使用前置或后置

camerastring

摄像头，默认值为back

successfunction接口调用成功的回调函数

failfunction接口调用失败的回调函数

completefunction接口调用结束的回调函数（调用成功、失败都会执行）

知识储备

1.选择媒体API

mediaType选项的合法值有3个：

limage（只能拍摄图片或从相册选择图片）；

lvideo（只能拍摄视频或从相册选择视频）；

lmix（可同时选择图片和视频）。

sourceType选项的合法值有2个：

lalbum（从相册选择）；

lcamera（使用相机拍摄）。

知识储备

1.选择媒