Vue开发实战一：FormData参数传递

vue 当请求参数的获取的为formData时（发送格式为FormData的请求），前端如何向后端传数据

<template>
  <div class="container">
    <el-form ref="formRef" :rules="rules" :model="form" label-width="20px">
      <el-row>
        <el-col :span="9">1、下载模板 </el-col>
        <el-col class="mutual imStyle" @click="download">导入模板下载</el-col>
        <el-col>2、在模板里填写信息</el-col>
        <el-col class="mutual">必填：除平均值外其他全部是必填项</el-col>
        <el-col class="mutual">序号：不可更改</el-col>
        <el-col class="mutual">日期格式：2021-06-12</el-col>
        <el-col>3、导入</el-col>
      </el-row>
      <el-form-item prop="file">
        <el-upload class="upload-demo" accept=".xlsx, .xls" :on-progress="handleFileUploadProgress" action='' drag :auto-upload="false" :on-change="uploadChange" :limit="1">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或
            <em>导入</em>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { onActivated, onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { goodsShowData, machineBannerType } from "../../utils/common";
import { readFile } from '../../utils/readFile.js'; //下文有该文件代码
import { importAdd } from "../../api/importAdd";

export default {
  name: "banner",
  setup() {
    const uploadChange = async (file) => {
      **let form = new FormData();
      form.append('file', file.raw)
      
      const { code, message } = await importAdd(form);**
      if (code === 200) {
        ElMessage.success(message);
      } else {
        ElMessage.error(message);
      }
    }

    onMounted(() => {
      // fetchData()
    });

    const download = () => {
      window.open(
        "https://image.ctssha.com/fileData/2022/04/07/tkRbcAc1kksaqms43h.xlsx"
      );
    };

    return {
      download,
      uploadChange
    };
  },
};
</script>

<style scoped>
.container {
  font-size: 14px;
  color: #606266;
}

.el-col {
  margin-top: 10px;
}

.table {
  margin-top: 20px;
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.extra-btn {
  margin-bottom: 10px;
}

.el-form-item {
  width: 100%;
}

.el-select {
  width: 100%;
}

.mutual {
  margin-left: 1.3%;
}

.imStyle {
  color: blue;
  cursor: pointer;
}

.el-upload--text {
  width: 220px !important;
  height: 130px !important;
}
.el-form-item{
  margin-top:10px;
}
</style>

readFile.js

export const readFile = (file) => {
    return new Promise(resolve => {
        let reader = new FileReader()
        reader.readAsBinaryString(file)
        reader.onload = ev => {
            resolve(ev.target.result)
        }
    })
}

或者一般在写个request改改头