2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > vue+element-ui 实现提交form表单上传文件

vue+element-ui 实现提交form表单上传文件

时间:2019-04-26 22:45:38

相关推荐

vue+element-ui 实现提交form表单上传文件

实现提交form表单上传文件,

在开发中有时候设计到上传文件,想实现的需求不是上传文件并携带 参数,是想要提交表单的同时,携带上传的文件。那么 我们就需要用这种方法来实现

<el-form-item label="测试依赖excel文件:"label-width="150px"><el-upload class="upload-demo"ref="upload":action="baseUrl+'/module/v1/manage/'"multiple:data="formInline":on-preview="handlePreview":file-list="fileList":http-request="httpRequest":limit="1":auto-upload="false"><el-button slot="trigger"size="small"type="">选取文件</el-button><div slot="tip"style="width: 250px;"class="el-upload__tip">只能上传excel格式文件,文件不能超过500kb</div></el-upload></el-form-item><el-button type="primary"icon=" iconfont icon-baocun"@click="submitUpload('formInline')">保存</el-button>

js代码如下,手动创建一个FormData对象,并且运用append的方法把要提交的表单数据逐个追加

submitUpload (formName) {const fd = new FormData()// FormData 对象this.fd = fdthis.$refs.upload.submit();//获取文件的提交动作this.fd.append('productid', this.formInline.productid)}

//新增自定义文件上传事件httpRequest (param) {console.log(param, '000')const fileObj = param.file // 相当于input里取得的filesthis.fd.append('file', fileObj)// 文件对象console.log(this.fd.get("file"), '选中文件后')axios.post('module/v1/manage/', this.fd).then(res => {console.log(res)this.moduleidenvieorment = res.data.moduleidif (res.data.code == '0000') {this.$message({type: 'success',message: '成功!'});} else if (res.data.code == '400') {this.$message.error(res.data.description);// this.$refs.upload.clearFiles();}})},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。