vue+flask实现文件上传
<template>
<div class="page">
<h2>文件上传</h2>
<el-form
ref="regeditForm"
:model="regeditForm"
:inline="false"
>
<el-form-item>
<el-upload
multiple
style="width:350px"
class="upload-demo"
ref="upload"
:file-list="fileList"
action
:http-request="httpRequest"
:auto-upload="false"
>
<el-button size="mini" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传war文件</div>
</el-upload>
</el-form-item>
<el-form-item style="text-align:left;width:430px">
<el-button type="primary" @click="register('regeditForm')">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
regeditForm: {
name: '表格',
description: "测试案例",
url: "http://127.0.0.1:5000/event/up"
}
};
},
methods: {
httpRequest(param) {
let fileObj = param.file; // 相当于input里取得的files
let data = new FormData(); // FormData 对象
data.append("file", fileObj); // 文件对象
data.append("name", this.regeditForm.name);
data.append("description", this.regeditForm.description);
this.$http({
url: this.regeditForm.url,
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
},
data
}).then(res => {
console.log("结果：", res);
}).catch(error => {
console.log("错误：", error);
})
},
register(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
console.log("有效")
this.$refs.upload.submit();
} else {
console.log("error submit!!");
return false;
}
});
}
}
}
</script>