ElementUI中的上传组件在表单中携带其它值提交表单后一起传到后端
例:
<el-form :model="submitForm" label-width="60px">
<el-form-item label="性别">
<el-radio-group v-model="submitForm.name">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="头像" ref="uploadElement" prop="imageUrl">
<el-input v-model="submitForm.imageUrl" v-if="false"></el-input>
<el-upload
class="avatar-uploader"
ref="upload"
:show-file-list="false"
:before-upload="beforeUpload"
:on-change="handleChange"
:auto-upload="false"
:data="submitForm">
<img v-if="submitForm.imageUrl" :src="submitForm.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit()">提交</el-button>
</el-form-item>
<el-image :src="this.resultUrl" v-if="resultP"></el-image>
</el-form>
methods: {
submit() {
this.$refs.upload.submit();
},
handleChange (file, fileList) {
this.submitForm.imageUrl = URL.createObjectURL(file.raw);
},
beforeUpload(file) {
let fd = new FormData()
fd.append('file', file)
fd.append('name', this.submitForm.name)
postAction(fd).then(res => {
if (res.status === 200){
//返回结果业务处理
}
})
return true;
},
},
export function postAction (data) {
return axios({
method: 'post',
url: '',
timeout: 20000,
data: data
})
}