微信小程序开发实战(22):上传文件和下载文件 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序开发实战(22):上传文件和下载文件

发表时间:2021-1-6

发布人:葵宇科技

浏览次数:76

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 = http://www.wxapp-union.com/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 所示的临时文件名。

图1  下载资源的临时文件

相关案例查看更多