天行博客

看过以前文章的朋友知道，微信小程序普通的信息交互是非常简单的，通过wx.request接口就可以了。需要注意的一点是，如果是POST请求，必须设置header参数的内容类型content-type为application/x-www-form-urlencoded，否则服务端无法接收小程序POST过来的数据。

代码示例：

wx.request({      url: 'https://api.tianapi.com/meinv/?key={APIKEY}',      method: 'POST',      

     data:'num=10',    //参数为键值对字符串      header: {        //设置参数内容类型为x-www-form-urlencoded        'content-type':'application/x-www-form-urlencoded',

       'Accept': 'application/json'      },      success: function (res) {        console.log(res.data)        that.setData({          items: res.data        })      }    })

但是，仅仅是简单的文本数据交互可能还不够，如果你的小程序需要下载服务端的文件以及小程序用户上传本地文件到服务端该怎么办？

这里就需要用到小程序另外两个接口wx.downloadFile和 wx.uploadFile，在微信小程序中所有官方提供的API接口都是以wx开头的。

一、下载文件接口wx.downloadFile（object）

下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

OBJECT参数说明：

无论是上传下载还是其他的什么功能，在小程序的后台都能找到对应的方法接口和解释文档，一般都会配有一个对象参数说明的表格，大家只需要按照官方说法调用或传递对应的参数即可。例如上面的下载接口参数说明，最左边是该方法可以传递的参数，中间的必填指的是这个参数是否可选，如果非必填，就按需传递，不需要利用到的功能可以忽略这个参数。

上面的表格“类型”一栏是什么意思？

string是字符串即由数字、字母、下划线组成的字符。一般是一个具体的内容，例如小程序下载文件的方法，需要指定下载文件的资源地址（URL），那么URL就是一个字符串内容。

Object是对象的意思，上一篇文章中解释过什么是对象。对象就是数据的集合，在上一篇文章中举过一个例子：Lovers:{NiuLangGirl : "织女"}，这是一个Lovers对象，NiuLangGirl的值为织女。那么在小程序下载方法中，可以传递一个header对象，用来指定HTTP请求中的Header（具体可以指定那些header，可以百度一下http/header），注意表格参数栏header右边的提示，这是参数是可选的，所以除有特殊要求，否则是不用传递的。

Function是函数，注意这里的函数值得是计算机函数，可理解成是一系列程序的一个子集，一个程序模块，实现某个单独的功能。例如在小程序下载文件方法中，请求成功的指定函数是success，该函数的说明是下载成功后以 tempFilePath的形式传给页面，res = {tempFilePath: '文件的临时路径'}，也就是说文件请求成功后，会返回一个res对象，tempFilePath的值就是文件的临时路径。当调用wx.saveVideoToPhotosAlbum接口保存文件到本地时，传递临时路径给filePath参数就可以把文件保存到用户的手机里了。

代码示例：

JS文件中编写程序逻辑

 DownLoadFile: function() {      var that = this;

wx.downloadFile({      url: 'https://user.tianapi.com/video.mp4',

     success: function (res) {        console.log(res.tempFilePath)        that.setData({          resource: res.tempFilePath        })      }    })

}

然后在wxml文件中展示数据

<button type="primary" bindtap="DownLoadFile">下载视频</button>

<video src="{{resource}}"/>

DownLoadFile是一个临时设置的一个函数名称，用来方便调用wx.downloadFile接口。没有什么含义，一般以字母开头，怎么好记怎么来。当用户点击下载视频时，就执行了这个函数中的wx.downloadFile方法，将服务端视频文件下载到本地并将文件的临时路径赋值到resource中，通过<video>标签显示。

所以，小程序的开发并没有那么神秘，其实是非常简单的，大家只需要根据微信小程序后台的官方文档，就可以根据自己的需求和创意开发出各种好玩的小程序。

二、上传文件接口wx.uploadFile（object）

同样，在微信小程序后台可以找到这个接口的示例说明，将本地资源也就是用户的手机文件上传到开发者服务器，需要先通过 chooseVideo等接口获取到一个用户本地文件的临时路径，然后通过wx.uploadFile接口将用户手机里的文件上传到指定服务器。从小程序端发起一个 HTTPS POST 请求，需要指定内容类型 content-type 为 multipart/form-data 。

延时光影小程序的上传界面

代码示例：

在js文件中编写程序逻辑

Page({
UpVideo:function(){
    chooseVideo:function(){
            sourceType: ['album'], // 指定文件的来源，album只允许相册中选择，camera是相机拍摄，两个都允许以逗号相隔。
            success: function (res) {
                var tempFilePaths = res.tempFilePaths //上面提到的预览文件的临时路径
                wx.uploadFile({
                    url: 'https://www.tianapi.com/?do=videofile', //仅为示例，非真实的接口地址
                    filePath: tempFilePaths[0],
                    name: 'file',
                    formData:{
                        'userid': 1 //ID为1的用户上传的文件
                    },
                    success: function(res){
                        var data = res.data
                        console.log(res);
                    }
                })
            }
        })
    }
})

wxml文件：

<view class="cview">
    <button bindtap="UpVideo">添加作品</button>
</view>

然后在服务端编写文件接收的代码就可以保持文件到自己的服务器了。

具体的代码分享和使用问题可以参考以下文章：

天行数据的示例小程序开发步骤

《美女图集》微信小程序开发分享

微信小程序开发你需要知道这些

不会写服务端接收文件的代码怎么办？服务器存储空间和带宽不够怎么办？下一篇文章分享如何利用云储存服务接收和存储数据。