antdv 組件手動上傳文件和表單內容到 springboot後端

前端將獲取到的文件列表中的originFileObj上傳到後端，後端通過MultipartHttpServletRequest接受即可
貼代碼如下：

<template>
  <Profile :selectedKeys="thisSelectedKeys" :open-keys="thisOpenKeys">
    <template v-slot:content>
      <a-row>
        <a-col :span="24" :style="{ marginTop: '36px' }"> </a-col>
        <a-col :span="18" :offset="3">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="選擇文件" prop="file" ref="file">
              <a-upload-dragger
                :before-upload="beforeUpload"
                name="file"
                :file-list="form.file"
                action="/api/user/uploadfile"
                @change="handleChange"
                :preview-file="previewFile"
              >
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">點擊或拖拽上傳文件</p>
                <p class="ant-upload-hint">
                  僅可選擇單個文件
                </p>
              </a-upload-dragger>
            </a-form-model-item>


            <a-form-model-item label="實驗類型" prop="type">
              <a-select v-model="form.type" placeholder="請選擇實驗類型">
                <a-select-option value="physical">
                  物理實驗
                </a-select-option>
                <a-select-option value="chemical">
                  化學實驗
                </a-select-option>
                <a-select-option value="elec">
                  電子技術實驗
                </a-select-option>
                <a-select-option value="electronic">
                  基電實驗
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item label="文件描述" prop="description">
              <a-input
                v-model="form.description"
                type="textarea"
                placeholder="請輸入文件描述"
              />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit">
                提交
              </a-button>
              <a-button style="margin-left: 10px;" @click="resetForm">
                重置
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </template>
  </Profile>
</template>

<script>
import Profile from "./common/Profile";

export default {
  data() {
    return {
      thisOpenKeys: ["sub3"], // 打開第三個子菜單
      thisSelectedKeys: ["6"],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        type: undefined,
        description: "",
        file: [],
      },
      rules: {
        type: [
          { required: true, message: "請選擇實驗類型", trigger: "submit" },
        ],
        file: [{ required: true, message: "請選擇文件", trigger: "submit" }],

        description: [
          { required: true, message: "請輸入實驗描述", trigger: "submit" },
        ],
      },
    };
  },
  components: {
    Profile,
  },

  methods: {
    beforeUpload(file) {
      this.form.file = [...this.form.file, file];
      return false;
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let form = new FormData();

          form.append("file", this.form.file[0].originFileObj)  // 這一步是關鍵
          form.append("description", this.form.description)
          form.append("type", this.form.type)

          this.$axios.post("/api/user/uploadfile",form,{
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
          ).then((res) => {
            if (res.data.status === 200) {
              this.$message.success("文件上傳成功");
              // window.location.reload();
            } else {
              this.$message.error("文件上傳失敗，請重新上傳");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleChange(info) {
      let fileList = [...info.fileList];
      //  Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-1);

      this.form.file = fileList;
    },
    previewFile() {
      return false;
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

後端直接接受即可

@RequestMapping(value = "/uploadfile", method = RequestMethod.POST)
    public Result uploadFile(MultipartHttpServletRequest request){
        return userService.uploadFile(Objects.requireNonNull(request.getFile("file")), request.getParameter("type"), request.getParameter("description"), 1L);
    }

github代碼請見 前端實現 後端實現