vue中圖片上傳接口聯調問題

<template>
          <el-form-item label="封面圖">
            <el-upload
              class="avatar-uploader"
              action="http://主機:8080/file/upfile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="defaultCoverImage" :src="defaultCoverImage" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
</template>
<script>
  export default {
       data(){
           return{
             defaultCoverImage: "", //業務需求需要多定義一個defaultCoverImage
             form: { defaultCoverImage: "", //默認封面圖}
        },
        methods(){
    // 封面圖上傳成功執行的方法
    handleAvatarSuccess(res, file) {
      //window.uploadImgUrl:文件路勁提取成全局變量
      this.defaultCoverImage = window.uploadImgUrl + res.data;
      this.form.defaultCoverImage = window.uploadImgUrl + res.data;
    },
    // 封面圖上傳之前執行的方法
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上傳頭像圖片只能是 JPG PNG JPEG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上傳頭像圖片大小不能超過 2MB!");
      }
      return isJPG && isLt2M;
    }
               }
           }
        }
     }
  }
</script>

注意不要讓後臺修改文件的名字，就叫file，否則上傳不成功。