上传文件和下载文件

前言：微信小程序可以使用wx.uploadFile()API来上传文件，使用wx.doenloadFile()API来下载文件

原始方法：

1.上传文件的步骤如下：

• 创建一个选择文件的按钮；
• 用户点击按钮后，调用wx.chooseMedia()方法来选择文件；
• 调用wx.uploadFile()方法来上传；

实例代码如下：

wx.chooseMedia()文档链接:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

//小程序页面js文件
Page({
    chooseImage(){
        wx.chooseMedia({
            count:1,    //数量
            mediaType:['image', 'video'],   //文件类型
            ....    //其他属性
            success:function(res){
                console.log(res)    //选择成功的文件地址
                let tempFilePaths = res.tempFilePaths;
            //拿到文件地址后，上传文件
            wx.uploadFile({
                url:'指定服务器接口url',
                filePath:tempFilePaths[0],  //本地文件路径，既选择文件返回的路径
                name:'file',    //上传文件的key,后台要用到
                success:function(res){
                    console.log(res)    //成功后的回调函数
                }
            })
            }
        })
    }
})

2.下载文件的步骤如下：

• 创建一个下载文件的按钮；
• 用户带年纪按钮后，调用wx.downloadFile()方法下载文件；
• 下载完成后，调用wx.saveFile()方法保存文件。

//小程序页面js文件
Page({
    downFile(){ //点击选择文件按钮触发下载文件事件
        wx.downloadFile({
            url:'文件的url',
            success:function(res){
                wx.saveFile({
                    tempFilePath:res.tempFilePath,  //保存的文件地址
                    success:function(res){  //成功后的回调函数
                        console.log(res.savedFilePath)
                    }
                })
            }
        })
    }
})

注意：上传文件需要服务器端支持文件上传功能，下载文件需要服务器端提供对应的文件下载链接。

封装后的方法

1.上传文件

//wx.uploadFile封装后的方法
wx_uploadFile: async (url, filePath, data, headers) => {
    return new Promise((resolve, reject) => {
      url = `${/^(http)(s)?\:\/\//.test(url) ? '' : config.url}${url}`
      let option = {
          url,
          filePath: filePath,
          name: 'file',
          timeout: config.timeout || 5000,
        },
        access_token = wx.getStorageSync(ACCESS_TOKEN)

      if (access_token) {
        header['Authorization'] = access_token
      }

      if (headers) {
        header = Object.assign(header, headers)
      }

      option['header'] = header

      if (data) {
        option['formData'] = data
      }
      wx.uploadFile({
        ...option,
        success: (res) => {
          resolve(JSON.parse(res.data))
        },
        fail: (err) => {
          reject(err)
        },
      })
    })
  },

1-2：上传文件的使用

• 创建一个点击事件触发上传文件的事件；
• 选择自己需要的文件
• 调用封装好的wx.uploadFile的方法，上传并且保存下成功后的文件地址

//request.js
//首先需要引入该方法，import request from "request文件路径"
selShelfImg(){
 wx.chooseMedia({
  count:1,
  mediaType:['image'],
  success:async (res)=>{
    let upload = await request.wx_uploadFile(`/sc/file/upload`,res.tempFiles[0].tempFilePath)
    this.setData({
       imageFile:upload.data    //重新赋值成功后的文件地址
     })
    }
  })
},

2.下载文件

//封装后的wx.downloadFile方法
wx_downloadFile: (url, params, headers) => {
    url = `${/^(http)(s)?\:\/\//.test(url) ? '' : config.url}${url}`

    let option = {
        url,
        timeout: config.timeout || 5000,
      },
      access_token = wx.getStorageSync(ACCESS_TOKEN)

    if (access_token) {
      header['Authorization'] = access_token
    }

    if (headers) {
      header = Object.assign(header, headers)
    }
    if (params && params.filePath) {
      option['filePath'] = params.filePath
    }

    option['header'] = header
    return wx.downloadFile(option)
  },