10.Vue上传二进制表单

1.客户端
<el-form ref="form" label-width="120px" name='myForm'>
　　<el-form-item label="真实姓名:">
　　　　<el-input name='realname'></el-input>
　　</el-form-item>
　　<el-form-item label="性别:" >
　　　　<el-radio-group v-model='sex' @change='chooseSex'>
　　　　　　<el-radio label="男"></el-radio>
　　　　　　<el-radio label="女"></el-radio>
　　　　</el-radio-group>
　　</el-form-item>
　　<el-form-item label="手机号:">
　　　　<el-input name='telphone'></el-input>
　　</el-form-item>
　　<el-form-item label="身份证号:">
　　　　<el-input name='idcardnum'></el-input>
　　</el-form-item>
　　<el-form-item label="身份证正面照:">
　　　　<el-input type='file' name='idcardface'></el-input>
　　</el-form-item>
　　<el-form-item label="身份证背面照:">
　　　　<el-input type='file' name='idcardback'></el-input>
　　</el-form-item>
　　<el-form-item label="手持身份证照:">
　　　　<el-input type='file' name='idcardme'></el-input>
　　</el-form-item>
　　<el-form-item>
　　　　<el-button type="primary" @click='onsub'>提交认证</el-button>
　　</el-form-item>
</el-form>

onsub:function(){
　　postBinaryHttp('/api/restful/privatehome/authenticate',myForm,function(res){
　　　　alert('收到');
　　　　alert(res.data);
　　})
}

export function postBinaryHttp(url,form,callback){
　　var formData = new FormData($(form)[0]);
　　axios.post(url,formData)
　　.then(callback)
　　.catch(function(err){
　　　　console.log(err);
　　　　alert('出错,请查看出错信息');
　　})
}

2.服务端:
npm install formidable --save-dev

let formidable = require('formidable');
async authenticate(ctx){
　　let loginbean = ctx.session.loginbean;
　　let form = new formidable.IncomingForm(); //创建上传表单
　　form.encoding = 'utf-8'; //设置编辑
　　form.uploadDir = './public/images/authenticate/'; //设置上传目录 文件会自动保存在这里
　　form.keepExtensions = true; //保留后缀
　　form.maxFieldsSize = 5 * 1024 * 1024 ; //文件大小5M
　　let rs = await form.parse(ctx.req,function(err, fields, files){
　　　　if(err){
　　　　　　console.log(err);
　　　　　　return;
　　　　}
　　　　console.log(fields.realname);
　　　　console.log(files.idcardface.path);
　　});
　　ctx.body='上传完成';
}