vue3上传文件

接口文件

hdmc,hddd,hdjb,cycy,zycy,kssj,jssj,description是后端需要的其他字段，files才是后端文件上传的字段
/dtjsTwHdgl为后端接口

//新增+文件上传
export const addTeamBreak = async (hdmc,hddd,hdjb,cycy,zycy,kssj,jssj,description,
files) => {const formData = new FormData();
if(files){
    files.forEach((file) => {
    formData.append("file", file);});}
    formData.append("hdmc", hdmc);
    formData.append("hddd", hddd);
    formData.append("hdjb", hdjb);
    formData.append("cycy", cycy);
    formData.append("zycy", zycy);
    formData.append("kssj", kssj);
    formData.append("jssj", jssj);
    if(description){
        formData.append("description", description);
    }
    try {
      const response = await service.post("/dtjsTwHdgl", formData, {});
      return response.data;
    } catch (error) {
      console.error(error);
      throw error;
    }
  };

template

新增或修改的对话框

<el-row>
          <el-col :span="20">
            <el-form-item v-if="addOrEditType == '修改'" label="附件名称" label-width="120px" prop="fileName">
              <el-input v-model="form.fileName" disabled maxlength="30" placeholder="无"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="选择附件" prop="file" label-width="120">
              <input type="file" ref="fileInput" multiple @change="handleFileChange" />
            </el-form-item>
          </el-col>
        </el-row>

js

选择附件点击的方法

//上传组件的代码
const handleFileChange = (event) => {
  data.files = [...event.target.files];
};

新增上传文件
hdmc, hddd, hdjb, cycy, zycy,kssj,jssj,description为后端需要的其他字段
data.files才是后端需要的文件上传的字段
修改文件和新增文件差不多，后端接口不同而已

 form.value.cycy=form.value.cycy.join(",")
      form.value.zycy=form.value.zycy.join(",")
    if (addOrEditType.value == "添加") {
        const { hdmc, hddd, hdjb, cycy, zycy,kssj,jssj,description } = form.value;
      const res = addTeamBreak(hdmc, hddd, hdjb, cycy, zycy,kssj, jssj,description,data.files);
      if (res) {
        ElMessage({ message: "新增成功", type: "success" });
        requestAPI();
      } 
    }