關於 Ant Design Vue框架中 <a-upload> beforeUpload 上傳檔案校驗之後,返回false 還能上傳的問題

Charles博客發表於2024-10-17

現在在(jinsai)外包的時候,使用的是jeecg-boot專案,後端上傳使用的是自帶的JImageUpload,裡面上傳是a-upload元件,就是 Ant Design Vue框架,說實話,挺難用的。
在JImageUpload元件中:

直接上程式碼:

點選檢視程式碼
      // 上傳前
      beforeUpload: function(file){
        this.uploadGoOn = true

        const fileType = file.type
        if(fileType.indexOf('image')<0){
          this.$message.warning('請上傳圖片');
		  // 這裡預設是true uploadGoOn: true,
          this.uploadGoOn = false;
          return false;
          // return new Promise(() => {})
        }

        if(file.size===0){
          this.$message.warning('請確保上傳的檔案大於0MB!')
          this.uploadGoOn = false;
          return false;
          // return new Promise(() => {})
        }

        // 預設為0
        if(this.imgSize === "0"){
          const isLt30m = file.size / 1024 / 1024 < 30
          if (!isLt30m) {
            this.$message.warning('請確保上傳的檔案小於30MB!');
            this.uploadGoOn = false;
            return false;
            // return new Promise(() => {})
          }
        }else {
          const isLt30m = file.size / 1024 / 1024 < parseInt(this.imgSize)
          if (!isLt30m) {
            this.$message.warning('請確保上傳的檔案小於10MB!');
            this.uploadGoOn = false;
            return false;
            // return new Promise(() => {})
          }
        }

      },
	  
	  // 重點是這個方法  根據狀態進行判斷
      async  handleChange(info) {
        if (!info.file.status && this.uploadGoOn === false) {
          info.fileList.pop()
        }
	 }

之前參考的帖子,但是不是這樣實現的,是:return new Promise((resolve, reject) => {}),這樣實現的
https://blog.csdn.net/weixin_55846296/article/details/123335595
https://blog.csdn.net/weixin_44647098/article/details/114836752

相關文章