el-upload上传图片没有公共上传接口，需要图片文件跟表单一起提交

需求：需要将图片文件和其他字段合成一个表单一起提交上去

 HTML代码（放了一整个表单的字段，可以看注释）

上传图片部分代码

整个表单代码 

<el-dialog v-model="dialogShow" top="10px" title="新增材质" width="40%">
      <el-form
        ref="addRef"
        :model="addForm"
        :rules="addRules"
        label-width="auto"
      >
        <-- 这个formitem是图片 -->
        <el-form-item label="材质纹理" prop="texturefile">
          <el-upload
            action="#"
            list-type="picture-card"
            accept=".png, .jpg, .jpeg"
            :on-change="handleChange"
            :auto-upload="false"
            :limit="1"
          >
            <el-icon><ele-Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="材质名称" prop="materialname">
          <el-input v-model="addForm.materialname"></el-input
        ></el-form-item>
        <el-form-item label="待渲染面" prop="renderside">
          <el-select v-model="addForm.renderside" placeholder="请选择">
            <el-option
              v-for="item in renderSide"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select
        ></el-form-item>
        <el-form-item label="材质颜色" prop="basiccolor">
          <el-col :span="22">
            <el-input v-model="addForm.basiccolor"></el-input>
          </el-col>
          <el-col :span="2"
            ><el-color-picker v-model="addForm.basiccolor"
          /></el-col>
        </el-form-item>
        <el-form-item label="不透明度" prop="opacity">
          <el-input-number
            v-model="addForm.opacity"
            :precision="1"
            :step="0.1"
            :min="0"
            :max="1"
        /></el-form-item>
        <el-form-item label="纹理横向排布" prop="texturewrapt"
          ><el-select v-model="addForm.texturewrapt" placeholder="请选择">
            <el-option
              v-for="item in texturewrap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select
        ></el-form-item>
        <el-form-item label="纹理纵向排布" prop="texturewraps">
          <el-select v-model="addForm.texturewraps" placeholder="请选择">
            <el-option
              v-for="item in texturewrap"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select
        ></el-form-item>
        <el-form-item label="纹理横向重复次数" prop="repeatx"
          ><el-input type="number" v-model="addForm.repeatx"></el-input
        ></el-form-item>
        <el-form-item label="纹理纵向重复次数" prop="repeaty"
          ><el-input type="number" v-model="addForm.repeaty"></el-input
        ></el-form-item>
        <el-form-item label="纹理横向偏移" prop="offsetx"
          ><el-input type="number" v-model="addForm.offsetx"></el-input
        ></el-form-item>
        <el-form-item label="纹理纵向偏移" prop="offsety">
          <el-input type="number" v-model="addForm.offsety"></el-input
        ></el-form-item>
        <el-form-item label="自发光颜色" v-if="type !== 1" prop="emissivecolor">
          <el-col :span="22"
            ><el-input v-model="addForm.emissivecolor"></el-input
          ></el-col>
          <el-col :span="2"
            ><el-color-picker v-model="addForm.emissivecolor"
          /></el-col>
        </el-form-item>
        <el-form-item
          label="自发光强度"
          v-if="type !== 1"
          prop="emissiveintensity"
          ><el-input v-model="addForm.emissiveintensity"></el-input
        ></el-form-item>
        <el-form-item label="高光颜色" v-if="type === 3" prop="specularcolor">
          <el-col :span="22"
            ><el-input v-model="addForm.specularcolor"></el-input
          ></el-col>
          <el-col :span="2"
            ><el-color-picker v-model="addForm.specularcolor"
          /></el-col>
        </el-form-item>
        <el-form-item label="高光强度" v-if="type === 3" prop="shininess"
          ><el-input v-model="addForm.shininess"></el-input
        ></el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogShow = false">取消</el-button>
          <-- 这里是提交事件 -->
          <el-button type="primary" @click="addOrEdit">确定</el-button>
        </div>
      </template>
    </el-dialog>

ts部分代码（其他不重要 主要看注释）

import type { IMaterialData, IMaterialItem } from "@/api/Material/Material";
import {
  MaterialFuzzyApi,
  MaterialPhongApi,
  MaterialBasicApi,
  MaterialLambertApi,
} from "@/api/Material/Material";
import { onMounted, ref } from "vue";
import { useUserInfoStore } from "@/stores/userInfo";
import dayjs from "dayjs";
import { UploadFile } from "element-plus";

const userInfoStore = useUserInfoStore();
//表单数据收集 这里没有定义texturefile是因为不知道给它赋什么初始值
const addForm = ref<any>({
  materialname: "",
  renderside: 0,
  basiccolor: "",
  opacity: 0,
  texturewrapt: 0,
  texturewraps: 0,
  repeatx: 0,
  repeaty: 0,
  offsetx: 0,
  offsety: 0,
  uploadername: userInfoStore.userInfo.username,
  uploadtime: "",
  emissivecolor: "",
  emissiveintensity: "",
  specularcolor: "",
  shininess: "",
});
const renderSide = [
  {
    value: 1,
    label: "前面",
  },
  {
    value: 2,
    label: "背面",
  },
  {
    value: 3,
    label: "双面",
  },
];
const texturewrap = [
  {
    value: 1,
    label: "拉伸至边缘",
  },
  {
    value: 3,
    label: "重复",
  },
  {
    value: 5,
    label: "镜像重复",
  },
];
const type = ref<number>();

//创建要上传的表单
const param = new FormData();

//表单校验部分 form上的ref要绑定到addRef formitem标签中的prop要跟addRules中的字段一样（区分大小写）
const addRef = ref();

const addRules = {
  materialname: [
    { required: true, message: "请输入材质名称", trigger: "blur" },
  ],
  texturefile: [{ required: true, message: "材质纹理不能为空", trigger: "blur" }],
  renderside: [{ required: true, message: "请选择渲染面", trigger: "change" }],
  basiccolor: [{ required: true, message: "请输入基础颜色", trigger: "blur" }],
  opacity: [{ required: true, message: "请输入透明度", trigger: "blur" }],
  texturewrapt: [
    { required: true, message: "请选择纹理贴图方式", trigger: "change" },
  ],
  texturewraps: [
    { required: true, message: "请选择纹理贴图方式", trigger: "change" },
  ],
  repeatx: [
    { required: true, message: "请输入纹理横向重复次数", trigger: "change" },
  ],
  repeaty: [
    { required: true, message: "请输入纹理纵向重复次数", trigger: "change" },
  ],
  offsetx: [
    { required: true, message: "请输入纹理横向偏移", trigger: "change" },
  ],
  offsety: [
    { required: true, message: "请输入纹理纵向偏移", trigger: "change" },
  ],
  emissivecolor: [
    { required: true, message: "请输入自发光颜色", trigger: "blur" },
  ],
  emissiveintensity: [
    { required: true, message: "请输入自发光强度", trigger: "blur" },
  ],
  specularcolor: [
    { required: true, message: "请输入高光颜色", trigger: "blur" },
  ],
  specularintensity: [
    { required: true, message: "请输入高光强度", trigger: "blur" },
  ],
  shininess: [{ required: true, message: "请输入高光度", trigger: "blur" }],
};

const dialogShow = ref(false);

//上传图片方法

//！！！上传文件（只要有改变）的时候提取上传文件流 file是拿到上传的文件数据
const handleChange = (file: UploadFile) => {
  addForm.value.texturefile = file.raw!;
};

//提交表单事件
const addOrEdit = async () => {
  // 表单验证
  const valid = await addFormRef.value?.validate();
  if (!valid) return;
  try {
    addForm.value.uploadtime = dayjs().format("YYYY-MM-DD HH:mm:ss");
    //！！！主要是下三行代码，将数据遍历存到创建的表单中
    Object.keys(addForm.value).forEach((key) => {
      param.append(key, addForm.value[key]);
    });

    //发送请求，这里是根据用户创建的类型，发送不同的请求
    if (type.value === 1) {
      await MaterialBasicApi(param);
    } else if (type.value === 2) {
      await MaterialLambertApi(param);
    } else {
      await MaterialPhongApi(param);
    }
    getList();
    dialogShow.value = false;
    ElMessage.success("操作成功");
  } catch (e: any) {
    ElMessage.warning(e.message);
  }
};