微信小程序开发 教案 6.1 教案-文件上传和下载

1、第6章小程序API任务6.1文件上传和下载课时内容文件上传和下载课时4教学目标掌握服务器域名配置和临时服务器部署的方法；掌握wx.request。接口的用法；掌握 wx.uploadFile。接口和 wx.downFile。接口的用法； 实现制作文件上传和文件下载功能的小程序。教学重难点掌握wx.request。接口的用法；掌握 wx.uploadFile()接口和 wx.downFile。接口的用法； 实现文件上传和文件下载功能的小程序。教学设计.教学思路：介绍服务器域名配置和临时服务器部署的方法、使用wx.request。接口、 wx.uploadFile。接口和wx.downFile。接

2、口、文件上传和文件下载功能的实现；通过多 媒体演示和实机操作讲解微信小程序使用wx.request。接口、wx.uploadFile。接口和 wx.downFile()接口的使用，以及文件上传和文件下载功能的实现；通过小程序实战 巩固基础知识。.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍小程序文件传输API的相关应用，其中包含文件的上传和下载功能，小程序允 许使用相关接口与开发者或第三方服务器进行通信。文件上传功能主要配合开发者服务器使用；文 件下载功能使用开发者服务器或第三方服务器均可。本节的学习目标：(1)熟练掌握服务器域名配置和临时服务器部署的

3、方法；(2)熟练掌握wx.request()接口的用法；(3)熟练掌握 wx.uploadFile。接口和 wx.downFile。接口的用法。以下来分别介绍文件上传和文件下载两种功能的程序编写。二、导入新知.文件的上传文件上传请求小程序使用wx.uploadFile(OBJECT)可以将本地资源上传到开发者服务器，在上传时将从客户端发起一个HTTPS POST请求到服务器，其中content-type为multipart/form-datao 该接口可以配合其他接口一起使用，例如页面通过wx.chooselmage接口获取到一个本地资源的临时文件路径后可以通过此接口将本地资源上传到指定服务器

4、。上传任务对象wx.uploadFile(OBJECT)接口返回一个uploadTask对象，通过该对象可监听文件上传进度变 化事件以及取消上传任务。.文件下载请求小程序使用wx.downloadfile(OBJECT)可以从服务器下载文件资源到本地。下载文件的原理是客户端直接发起一个HTTP GET请求，返回文件的本地临时路径。 需要注意的是，本地临时路径文件在小程序本次启动期间可以正常使用，如需持久保存， 需要主动调用wx.saveFile。才能在小程序下次启动时访问得到。三、实现效果本任务主要是制作文件上传。在文件上传upload.wxml中，包含了两个button按钮分 别用于选择图片

5、和上传图片，对应的自定义函数分别是chooselmage。和uploadFile。如果 尚未选择文件就上传会有错误提示。选择好图片文件后会在页面的image组件中显示出 来，在图片选择完成后单击“开始上传”按钮将调用wx.uploadFile。接口进行上传。 WeChar?1633wok JW文件上传文件上传文件上传wx.uploadFile(OBJECT)选择文件开始上传 I Q WeCharr1637100K文件上传wx.uploadFile(OBJECT)选择文件开始上传文件册/Ttt1 .文件上传wx.uploadFile(OBJECT)开始上传开始上传开始上传选择文件开始上传本任务主

6、要是制作文件下载，单击“点击此处下载图片”按钮即可在页面中显示出 需要下载的图片。在download.wxml中，使用wx:if和wx:else属性切换显示内容。当尚未 下载文件时，只显示一个“点击此处下载图片”的按钮button，对应的自定义函数为 download()；当已经下载成功时，隐藏“点击此处下载图片”按钮，显示图片组件image 和重置按钮button，分别用于显示所下载的图片和返回未下载的状态。WeOiar71034kjm M*文件 | WeCharr1644WO%文件W/Ttt | 2.文件下载wx.downloadFile(OBJECT)点击此处下载图片四、任务实现2.文件下载wx.downloadFile(OBJECT)1.软件部署WeCharr1644WO% 我的电脑 本地磁盘(D:) phpStudy WWW miniDemov 0名