uni-file-picker 进度条

你可以使用 `uni-file-picker` 组件来实现文件选择器，并结合进度条来显示上传进度。首先，你需要在项目中引入 `uni-file-picker` 组件，并根据需要配置相关参数。

下面是一个示例代码，展示了如何使用 `uni-file-picker` 和进度条：

<template>
  <view>
    <!-- 文件选择器 -->
    <uni-file-picker
      :count="1"
      @success="onFileSuccess"
    ></uni-file-picker>

    <!-- 进度条 -->
    <uni-progress
      v-if="showProgress"
      :percent="uploadProgress"
    ></uni-progress>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showProgress: false, // 是否显示进度条
      uploadProgress: 0, // 上传进度（百分比）
    };
  },
  methods: {
    onFileSuccess(res) {
      // 文件选择成功后触发的回调函数
      const file = res.tempFiles[0];

      // 显示进度条
      this.showProgress = true;

      // 模拟上传过程，每隔一段时间更新进度
      const interval = setInterval(() => {
        if (this.uploadProgress < 100) {
          this.uploadProgress += 10;
        } else {
          // 上传完成，隐藏进度条
          this.showProgress = false;
          clearInterval(interval);
        }
      }, 1000);
    },
  },
};
</script>

在上述示例中，当用户选择文件后，`uni-file-picker` 组件的 `success` 事件会被触发，然后你可以在 `onFileSuccess` 方法中处理文件上传的逻辑。这里使用了一个定时器来模拟上传过程，每隔一段时间更新进度条的值。注意：在实际使用中，你需要根据你的具体上传方式和逻辑来更新进度条的值。

希望以上示例对你有帮助！如有其他问题，请随时提问。