微信小程序上传文件进度条ui实现

1. 首先需要引入wx.uploadFile方法，该方法可以用来上传文件，并且可以监听上传进度。

2. 在上传文件之前，先显示进度条。可以使用wx.showLoading方法来显示一个加载提示框。

3. 在上传文件的回调函数中，获取上传进度并更新进度条。可以使用wx.onProgressUpdate方法来监听上传进度变化。

4. 上传完成之后，隐藏进度条。可以使用wx.hideLoading方法来隐藏加载提示框。

5. 如果上传出现错误，需要对错误进行处理。可以使用wx.showToast方法来显示一个错误提示框。

示例代码：

Page({
  uploadFile: function () {
    wx.showLoading({
      title: '上传中...',
    })
    wx.uploadFile({
      url: 'your-upload-api-url',
      filePath: 'your-file-path',
      name: 'file',
      success: function (res) {
        wx.hideLoading()
        wx.showToast({
          title: '上传成功',
        })
      },
      fail: function (res) {
        wx.hideLoading()
        wx.showToast({
          title: '上传失败',
          icon: 'none'
        })
      },
      complete: function (res) {
        // 上传完成
      }
    })
    wx.onProgressUpdate(function (res) {
      wx.showLoading({
        title: '上传进度 ' + res.progress + '%',
      })
    })
  }
})

上述代码实现了一个上传文件并显示进度条的功能。需要注意的是，上传文件的url、filePath和name参数需要根据实际情况进行修改。同时，上传进度的显示方式也可以根据实际需求进行修改。