微信小程序开发实战（22）：上传文件和下载文件

￡神魔★判官ぃ 2022-11-29 13:30 254阅读 0赞

1. 上传文件

使用wx.uploadFile方法可以向指定的Url上传文件。该方法只有一个Object类型的参数，Object类型参数属性的描述如下所示。

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

测试wx.uploadFile方法也需要找一个https链接，如果没有，可以使用https://www.baidu.com，尽管该链接不会真正接收上传的文件，但会让wx.uploadFile方法正常执行，以便测试其中的回调函数。

下面的代码通过wx.chooseImage方法弹出一个图像选择对话框，选择图像文件后，会调用wx.uploadFile方法将该文件上传到服务端，如果上传成功，success函数会调用，并输出响应数据。

wx.chooseImage({
      success: function(res) {
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: 'https://www.baidu.com',
          filePath: tempFilePaths[0],
          name: 'file',
          formData:{
            'user': 'Bill'
          },
          success: function(res){
            var data = res.data
           console.log(data);
          }
        })
      }
    })

2. 下载文件

使用wx.downloadFile方法可以下载文件到临时路径，该方法有一个Object类型的参数，Object类型参数属性的描述如下所示。

*  url：String类型，必选，下载资源的Url
 *  header：Object类型，可选， HTTPS请求Header
 *  success：       Function类型，可选，下载成功后以 tempFilePath 的形式传给页面，res = \{tempFilePath: '文件的临时路径'\}
 *  fail：Function类型，可选，接口调用失败的回调函数
 *  complete：Function类型，可选， 接口调用结束的回调函数（调用成功、失败都会执行）

同样，使用wx.downloadFile方法，也必须下载HTTPS Url指定的资源，例如，下面的代码会下载百度首页。

wx.downloadFile({
      url: 'https://www.baidu.com',
      success: function(res) {
          //  输出下载资源存储的临时文件名
          console.log( res.tempFilePath);
      }
    })

下载的资源会保存成临时文件，我们可以通过res.tempFilePath获取临时文件名，并做进一步处理，例如，如果下载的是视频文件，可以使用wx.playVoice方法进行播放。

执行这段代码后，会看到在Console中输出如图1所示的临时文件名。

![format_png][]

图1  下载资源的临时文件

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 1][]

关注  「极客起源」  公众号，获得更多免费技术视频和文章。

![format_png 2][]

[format_png]: /images/20221124/5439443c39774e1385c78033d55d6fed.png
[format_png 1]: /images/20221124/4e81f72043b94e7fb5f3b014b7c95094.png
[format_png 2]: /images/20221124/feed6dca722f4c30b01b2c0cfd8e869b.png