axios 上傳文件時展示進度條

在config中監聽onUploadProgress事件即可，中間有個progressEvent，從中我們可以獲取到上傳進度

 this.$axios
            .post("/api/file/uploadfile", form, {
              headers: {
                "Content-Type": "multipart/form-data",
              },
              onUploadProgress: (progressEvent) => {
                if(progressEvent.lengthComputable){
                  var complete =
                  (( (progressEvent.loaded / progressEvent.total) * 100) | 0);
                  this.percent = complete
                  if(complete >=100){
                    this.show = false
                    this.percent = 0; // 重新置0
                  }
                }
              },
            })
            .then((res) => {
              if (res.data.status === 200) {
                this.resetForm();
                this.$message.success(res.data.message);
              } else {
                this.$message.error(res.data.message);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }

效果圖， 具體可以參考該項目，歡迎 ⭐️