vue+element-ui 实现提交form表单上传文件
实现提交form表单上传文件,在开发中有时候设计到上传文件,想实现的需求不是上传文件并携带 参数,是想要提交表单的同时,携带上传的文件。那么 我们就需要用这种方法来实现<el-form-item label="测试依赖excel文件:"label-width="150px"><el-upload class="upload-demo"ref=
·
实现提交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 = fd
this.$refs.upload.submit();//获取文件的提交动作
this.fd.append('productid', this.formInline.productid)
}
//新增自定义文件上传事件
httpRequest (param) {
console.log(param, '000')
const fileObj = param.file // 相当于input里取得的files
this.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.moduleid
if (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();
}
})
},
更多推荐
已为社区贡献8条内容
所有评论(0)