vue el-upload简单上传文件

1.直接使用 el-upload上传文件

<el-form-item label="市/区应急预案上传" :required="true">
          <el-upload
            ref="upload"
            :action="actionUrl"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
            :multiple="false"
            :on-exceed="exceed"
            :on-change="fileChange"
            :on-remove="removeHandle"
            :http-request="uploadFile"
            :accept="accept"
            :file-name="'uploadfile'"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>

<!--            <el-button-->
<!--              style="margin-left: 10px"-->
<!--              size="small"-->
<!--              type="success"-->
<!--              @click="submitUpload"-->
<!--            >上传-->
<!--            </el-button>-->
            <div slot="tip" class="el-upload__tip">
              上传类型为
              <span style="color: red; font-weight: bold">{{ accept }}</span
              >文件，文件不小于{{ fileSize }}KB, 且不超过{{ fileSize }}M
            </div>

          </el-upload>
        </el-form-item>

2.js 部分,不使用el-upload的上传方法，直接在form 提交时上传文件

    exceed(files, fileList) {
      this.$message({
        message: "只能上传单个文件",
        showClose: true,
        type: "warning",
      });
    },
    fileChange(file, fileList) {
      // console.log("file",file);
      // console.log("fileList",this.fileList);

      this.fileList = fileList;
      const isType = this.checkFileType(file.raw.type);
      const isLt10M = file.size < 1024 * 1024 * this.fileSize;
      if (isType && isLt10M ) {
        this.fileList = fileList;
      } else {
        this.fileList = [];
        // this.$refs.upload.clearFiles()
        if (!isType) {
          //  console.log("2222");
          this.$message.warning("文件格式不正确!");
        }
        if (!isLt10M) {
          this.$message.warning("文件大小不能超过" + this.fileSize + "MB!");
        }

      }
    },

    removeHandle(file, fileList) {
      this.fileList = fileList;
    },

    uploadFile(file) {
      this.fileLimit++;
      this.fileData.append(this.fileName, file.file);
      if (this.fileLimit === this.fileList.length) {
        this.$emit("formData", this.fileData);
        this.fileLimit = 0;
      }
    },
    checkFileType(t) {
      if (this.accept === ".pdf") {
        return t === "application/pdf";
      } else if (
        (this.accept.includes("jpg") &&
          this.accept.includes("jpeg") &&
          this.accept.includes("png") &&
          this.accept.includes("pdf")) ||
        this.accept.includes("mp4") ||
        this.accept.includes("mkv")
      ) {
        return (
          t === "image/jpeg" ||
          t === "image/png" ||
          t === "application/pdf" ||
          t.includes("video")
        );
      } else if (
        this.accept.includes("jpg") &&
        this.accept.includes("jpeg") &&
        this.accept.includes("png")
      ) {
        return t === "image/jpeg" || t === "image/png";
      } else if (this.accept.includes("docx") && this.accept.includes("pdf")) {
        return (
          t === "application/pdf" ||
          t ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        );
      } else if (this.accept.includes("dgn") && this.accept.includes("rvt")) {
        return true;
      } else if (
        this.accept.includes("xlsx") &&
        this.accept.includes("xls") &&
        this.accept.includes("docx") &&
        this.accept.includes("doc")
      ) {
        return (
          t === "application/vnd.ms-excel" ||
          t ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          t ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
          t === "application/msword"
        );
      } else if (this.accept.includes("xlsx") || this.accept.includes("xls")) {
        return (
          t ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        );
      } else {
        return (
          t === "application/pdf" ||
          t ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
          t === "application/msword" ||
          t === "image/jpeg" ||
          t === "image/png"
        );
      }
    },

3.页面提交，后台用 @RequestParam(“uploadfile”) List uploadfile, 接收文件

 async submitYuan() {
      if (this.validateForm()) {
        this.$confirm("是否进行提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        })
          .then(() => {

            this.formData = new FormData();
            Object.keys(this.form).forEach((key) => {
              this.formData.append(key, this.form[key]);
            });

            this.formData.append("uploadfile", this.fileList[0].raw)
            //this.formData.guid=this.YuAnid;

            //console.log("this.formData",this.formData)
            SaveYuan(this.formData)
              .then((response) => {
                this.$emit("successForm", response);
               // this.saveCancle();

              })
              .catch((_) => {
              });
          })
          .catch((_) => {
          });
      } else {
       // alert("表单验证不通过");
      }
    },

4。结果展示