Vant Van-Uploader 上传图片添加进度条：详细教程和代码示例

可以使用 van-uploader 组件自带的 'upload-text' 和 'upload-icon' 属性来添加上传进度条和上传状态图标。具体方法如下：

1. 在 van-uploader 组件中添加 'upload-text' 和 'upload-icon' 属性，如下所示：

2. 在 afterRead 方法中添加上传进度条的显示和隐藏逻辑，如下所示：

   afterRead(file) {
     let imgDate = new FormData();
     imgDate.append('file', file.file)
   
     // 显示上传进度条
     this.$toast.loading({
       duration: 0, // 持续展示 toast
       forbidClick: true, // 禁用背景点击
       loadingType: 'spinner', // 加载图标类型
       message: '上传中...',
       mask: true // 是否显示遮罩层
     });
   
     uploadImg(imgDate).then((res) => {
       // 隐藏上传进度条
       this.$toast.clear();
   
       this.fileList.push({
         url: res.data.url,
         name: file.file.name
       });
     }).catch((error) => {
       // 隐藏上传进度条
       this.$toast.clear();
   
       this.$toast.fail('上传失败，请重试！');
     });
   }
   

这样就可以在上传图片时显示上传进度条和上传状态图标了。