小程序下载图片、文件、wx.downloadFile，废话少说直接上代码

港控/mmm° 2022-06-01 13:14 960阅读 0赞

###  ###

### 官方开发文档   wx.downloadFile(OBJECT) ###

###  ###

下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。使用前请先阅读[说明][Link 1]。

OBJECT参数说明：

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style="">参数</th> 
   <th style="">类型</th> 
   <th style="">必填</th> 
   <th style="">必填</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">url</td> 
   <td style="">String</td> 
   <td style="">是</td> 
   <td style="">下载资源的 url</td> 
  </tr> 
  <tr style=""> 
   <td style="">header</td> 
   <td style="">Object</td> 
   <td style="">否</td> 
   <td style="">HTTP 请求 Header，header 中不能设置 Referer</td> 
  </tr> 
  <tr style=""> 
   <td style="">success</td> 
   <td style="">Function</td> 
   <td style="">否</td> 
   <td style="">下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: '文件的临时路径'}</td> 
  </tr> 
  <tr style=""> 
   <td style="">fail</td> 
   <td style="">Function</td> 
   <td style="">否</td> 
   <td style="">接口调用失败的回调函数</td> 
  </tr> 
  <tr style=""> 
   <td style="">complete</td> 
   <td style="">Function</td> 
   <td style="">否</td> 
   <td style="">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 [wx.saveFile][]，才能在小程序下次启动时访问得到。

success返回参数说明：

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style="">参数</th> 
   <th style="">类型</th> 
   <th style="">说明</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">tempFilePath</td> 
   <td style="">String</td> 
   <td style="">临时文件路径，下载后的文件会存储到一个临时文件</td> 
  </tr> 
  <tr style=""> 
   <td style="">statusCode</td> 
   <td style="">Number</td> 
   <td style="">开发者服务器返回的 HTTP 状态码</td> 
  </tr> 
 </tbody> 
</table>

返回值：

> 基础库 1.4.0 开始支持，低版本需做[兼容处理][Link 2]

返回一个 `downloadTask` 对象，通过 `downloadTask`，可监听下载进度变化事件，以及取消下载任务。

#### downloadTask ####

downloadTask 对象的方法列表：

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style="">方法</th> 
   <th style="">参数</th> 
   <th style="">说明</th> 
   <th style="">最低版本</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">onProgressUpdate</td> 
   <td style="">callback</td> 
   <td style="">监听下载进度变化</td> 
   <td style=""><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html" title="基础库 1.4.0 开始支持，低版本需做兼容处理。" style="" rel="nofollow">1.4.0</a></td> 
  </tr> 
  <tr style=""> 
   <td style="">abort</td> 
   <td style="">&nbsp;</td> 
   <td style="">中断下载任务</td> 
   <td style=""><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html" title="基础库 1.4.0 开始支持，低版本需做兼容处理。" style="" rel="nofollow">1.4.0</a></td> 
  </tr> 
 </tbody> 
</table>

onProgressUpdate 返回参数说明：

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style="">参数</th> 
   <th style="">类型</th> 
   <th style="">说明</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">progress</td> 
   <td style="">Number</td> 
   <td style="">下载进度百分比</td> 
  </tr> 
  <tr style=""> 
   <td style="">totalBytesWritten</td> 
   <td style="">Number</td> 
   <td style="">已经下载的数据长度，单位 Bytes</td> 
  </tr> 
  <tr style=""> 
   <td style="">totalBytesExpectedToWrite</td> 
   <td style="">Number</td> 
   <td style="">预期需要下载的数据总长度，单位 Bytes</td> 
  </tr> 
 </tbody> 
</table>

wxml：

<button bindtap='down_file'>下载</button>//用来触发下载函数的按钮
    <view><image src='{
       {img_l}}' bindtap='preview_img'></image></view>

下载的资源在服务器中支持：

page({
          data:{
            img_l:''
            },
    preview_img:function(){//图片预览函数
        wx.previewImage({
          current: this.data.img_l, // 当前显示图片的http链接
          urls: this.data.img_l // 需要预览的图片http链接列表
        })
      },
      down_file:function(){
        var _this = this;
        const downloadTask=wx.downloadFile({
          url: 'http://127.0.0.1/m_pro/min_img/1517295297785-2018-01-30.jpg', //仅为示例，并非真实的资源
          success: function (res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
           console.log(res)
           if(res.statusCode === 200){
              _this.setData({
                img_l:res.tempFilePath //将下载的图片临时路径赋值给img_l,用于预览图片
              })
           }
          }
        })
        downloadTask.onProgressUpdate((res) => {
          console.log('下载进度', res.progress)
          console.log('已经下载的数据长度', res.totalBytesWritten)
          console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
        })
      }
      
    
    
    
    
    })

[Link 1]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-network.html
[wx.saveFile]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/file.html
[Link 2]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html