<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.$axios.post("/details", formData);
if (res.status !== 200)
return this.$message.error({ message: "上传信息失败" });
this.$message({ message: "上传信息成功", type: "success" });
}