需求

实现一个表单，内容包括键值对数据和文件数据。
表单如下：

需要将文件和task name、task message以及task type等数据同文件一起传给服务器。

实现

首先element-plus官网UpLoad是有完整的文件上传步骤的，但为仅文件上传，没有其他数据，所以需要自己写数据上传，使用UpLoad组件来获取用户选择的文件。
然后

HTML部分

注意：如果小伙伴要复制下方代码，在运行时要删除所有的注释，不然会报错，该注释仅仅是为了解释。

<el-upload 
    class="upload-demo" // class
    action="none" // 不使用组件自带的上传功能
    multiple // 支持多选文件
    accept=".h5ad" // 限制文件类型为.h5ad类型
    :file-list="formOptions.data.addFileList" // 绑定数据
    :auto-upload="false" // 关闭自动上传（因为该组件仅仅是用来收集文件的，文件的上传同其他数据一起）
>
    <template #trigger>
        <el-button type="primary" size="small">select file</el-button> // 选择文件按钮
    </template>
    <template #tip>
        <div class="el-upload__tip">
            The file format is h5ad only. // 文件上传提示
        </div>
    </template>
</el-upload>

JS部分

// 校验当前数据是否符合标准
if (!ConformToTheStandard()) return;

const formData = getFormData(); // 获取要穿给后端的标准结构数据
getCreateTask(formData).then(res => {
    if (res.state) {
        ElNotification({
            message: 'Task creation succeeded',
            type: 'success',
            duration: 0,
        })
    } else {
        console.warn('warn')
    }
})

function getFormData(): FormData {
	// 要用FormData来承载文件！这是重点
    const formData = new FormData();
    // 向formData中添加数据
    formData.append('userId', String(store.getters.userId));
    formData.append('projectId', String(store.state.currentProjectId));
    formData.append('taskName', formOptions.data.taskName);
    formData.append('taskMessage', formOptions.data.taskMessage);
    formData.append('taskType', formOptions.data.taskType);
    formData.append('creationMethod', formOptions.data.creationMethod);

	// formData可以添加同名数据，在获取的时候可根据名称获得所有key为该名称的数据。
	formOptions.data.addFileList.forEach(v => {
        formData.append('addFiles', v.raw)
    })

    return formData;
}

formOptions.data.addFileList：
重点：Upload组件获取的一个文件数据如下，其中raw对象才为文件数据对象，是要将每个文件的raw对象放到FormData中传给服务器的。

结果

服务器能够根据前端发送的数据解析到文件数据。万事大吉！