vantui 上传照片显示进度

在Vant UI中，可以使用Uploader组件来上传照片并显示上传进度。在上传过程中，可以通过设置show-upload 和 upload-text属性来显示上传进度和上传状态。同时，可以在after-read回调函数中获取到上传的文件对象，并将其上传至服务器。具体实现方法可以参考以下代码：

<van-uploader
  :max-count="3"
  :show-upload="true"
  :upload-text="'上传中...'"
  :after-read="afterRead"
></van-uploader>

export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};

在上传完成后，可以通过设置show-upload为false来隐藏上传进度条。同时，可以使用Toast组件来显示上传成功或失败的提示信息。具体实现方法可以参考以下代码：

<van-uploader
  :max-count="3"
  :show-upload="showUpload"
  :upload-text="'上传中...'"
  :after-read="afterRead"
></van-uploader>

export default {
  data() {
    return {
      showUpload: true,
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.showUpload = false;
      Toast.success('上传成功');
    },
  },
};