上传下载API

本文编辑： 技术蓝天 技术蓝天浏览 5111 版权所有，严禁转载

接口说明:

接口 说明
wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。
wx.downloadFile(OBJECT) 下载文件资源到本地。客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

接口用法：



【代码】

wxml

<button bindtap="chooseImg">上传图片</button>

js

//index.js
var pageObject = {
  chooseImg : function(e){
     var that = this;
      wx.chooseImage({
        success: function (res) {
           var tempFilePaths = res.tempFilePaths
            wx.uploadFile({
              url: 'xxxxx', //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: 'file',
              formData:{
                'user': 'test'
              },
              success: function(res){
                //提示上传成功
                wx.showToast({
                  title: '上传成功',
                  icon: 'success',
                  duration: 2000
                });
              }
            })
        }
      })
  }
}

Page(pageObject);


wxml

<button type="default" bindtap="chooseImg">上传图片</button>
<button type="primary" bindtap="downImg">下载图片</button>

js

//index.js
//index.js
var pageObject = {
  chooseImg : function(e){
     var that = this;
      wx.chooseImage({
        success: function (res) {
           var tempFilePaths = res.tempFilePaths
            wx.uploadFile({
              url: 'xxxxx', //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: 'file',
              formData:{
                'user': 'test'
              },
              success: function(res){
                //提示上传成功
                wx.showToast({
                  title: '上传成功',
                  icon: 'success',
                  duration: 2000
                });
              }
            })
        }
      })
  },
  downImg : function(e){

    wx.downloadFile({
      url: 'http://q.qlogo.cn/qqapp/101359334/C28104F08FA21FCABEAD6470BE62543B/100', 
      success: function(res) {
        //提示上传成功
                wx.showToast({
                  title: '下载成功',
                  icon: 'success',
                  duration: 2000
                });
       console.dir(res);
      }
    })
  }

}

Page(pageObject);

主要方法：

【wx.uploadFile(OBJECT)】：【上传接口】

将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data 。

参数 类型 描述
url String 开发者服务器 url
filePath String 要上传文件资源的路径
name String 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header Object HTTP 请求 Header , header 中不能设置 Referer
formData Object HTTP 请求中其他额外的 form data
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数：

参数 类型 描述
data String 开发者服务器 url
statusCode String 要上传文件资源的路径 
wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

Bug & Tip

tip: 最大并发限制是 10 个
tip: 默认超时时间和最大超时时间都是 60s

【wx.downloadFile(OBJECT)】：【下载接口】

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

参数 类型 必填 描述
url String 是 下载资源的 url
header Object 否 HTTP 请求 Header
success Function 否 下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: ‘文件的临时路径’}
fail Function 否 接口调用失败的回调函数
complete Function 是 接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数：

参数 类型 描述
errMsg String 错误信息提示
statusCode String 要上传文件资源的路径
tempFilePath String 文件路径 
wx.downloadFile({
  url: 'http://example.com/audio/123', //仅为示例，并非真实的资源
  success: function(res) {
    wx.playVoice({
      filePath: res.tempFilePath
    })
  }
})

Bug & Tip

tip: 最大并发限制是 10 个
tip: 默认超时时间和最大超时时间都是 60s
tip: 网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版。
tip: 6.5.3 以及之前版本的 iOS 微信客户端 header 设置无效

如有技术问题或对本文有反馈，请加入QQ群：
微信小程序实战5营： 微信小程序Club实战5营