ElementUI和Axios提交带有文件的表单

完整表单代码

<el-form :model=\"addForm\" ref=\"addFormRef\" label-width=\"75px\"><el-form-item label=\"学校\" prop=\"school\"><el-select v-model=\"addForm.school\" placeholder=\"请选择学校\"><el-option v-for=\"item in schools\" :key=\"item.id\" :label=\"item.name\" :value=\"item.id\"></el-option></el-select></el-form-item><el-form-item label=\"奖项\" prop=\"award\"><el-select v-model=\"addForm.award\" placeholder=\"请选择奖项\" prop=\"award\"><el-option v-for=\"item in awards\" :key=\"item.id\" :label=\"item.name\" :value=\"item.id\"></el-option></el-select></el-form-item><el-form-item label=\"奖励对象\" prop=\"target\"><el-input v-model=\"addForm.target\"></el-input></el-form-item><el-form-item label=\"描述\" prop=\"brief\"><el-input v-model=\"addForm.brief\"></el-input></el-form-item><el-form-item><el-upload action=\"#\" :http-request=\"handleFile\" :on-success=\"handleSuccess\" :multiple=\"false\" :limit=\"1\" :on-exceed=\"handleExceed\"><el-button size=\"small\" type=\"primary\">点击上传</el-button><div slot=\"tip\" class=\"el-upload__tip\">只能上传jpg/png文件</div></el-upload></el-form-item></el-form>

要注意的有 ：
1.action=\”#\” 这个必须要有 也可以填action=\”\”
2.:http-request=\”handleFile\”是自定义文件上传的 如果你是直接post的话就不需要
我是通过handlerFile 把要上传的文件先储存好 然后等他输入完其他表单的信息按确定时再上传

handleFile(param) {this.uploadFile = param.file;console.log(param);},

用这个储存好
提交代码

async onSubmit() {let formData = new FormData();formData.append(\"school\", this.addForm.school);formData.append(\"award\", this.addForm.award);formData.append(\"target\", this.addForm.target);formData.append(\"brief\", this.addForm.brief);formData.append(\"file\", this.uploadFile);const { data: res } = await this.$http.post(\"/details\", formData);if (res.status !== 200)return this.$message.error({ message: \"上传信息失败\" });this.$message({ message: \"上传信息成功\", type: \"success\" });},