上传文件同时携带选择form表单的其他内容
例一：
接口需要传文件以及其他内容的参数，这里需要formdata封装再提交数据
<template>
<FormItem label="文件上传：" class="objBox" prop="object">
<Upload
:before-upload="handleUpload"
action='/url'
type="drag"
style="width:520px;height:120px"
v-model="setValidate.file"
>
<div style="padding:10px 0">
<Icon type="ios-cloud-upload" size="52" style="#3399ff"></Icon>
<p style="margin-top:10px;font-size:14px">点击或拖拽文件至此即可上传文件</p>
<p style="margin-top:20px;font-size:14px;color:red">请上传10GB以内的待测对象，支持.zip格式</p>
</div>
</Upload>
<div style="margin-top:20px;width:360px" v-if="setValidate.file !=null">
文件：{
{
setValidate.file.name}}
<span style="color:#2d8cf0;float:right" @click="removeFile">移除</span>
</div>
</FormItem>
<Spin>正在执行，请稍等...</Spin>
<Row style="margin:0 auto">
<Col span="8" offset="8">
<Button @click="Taskadd'setValidate')" type="primary">创建</Button>
<Button @click="back)">取消</Button>
</Col>
</Row>
</template>
<script>
export default {
data ){
setValidate:{
file:'',
taskId:'',
taskName:''
}
},
methods:{
Taskadd){
let _this = this;
if!setValidate.file){
_this.$Message.error"请上传文件")
return false
}
//这里是用了iview里面的form表单验证
_this.$refs['setValidate'].Validatevaild)=>{
ifvalid){
let formData = new FormData)
//通过append追加数据
formData.append'file',_this.setValidate.file)
formData.append'taskId',_this.setValidate.taskId)
formData.append'taskName',_this.setValidate.taskName)
formData.append'userName',_this.$Global.getCookie'userName'))
_this.axios{
method:'post',
url:'/url',
headers:{
'Content-Type':'multipart/form-data'},
data:formData
}).then res)=>{
ifres.result == 'SUCCESS'){
_this.$Message.info"上传成功！")
}
})
}else{
_this.$Message.error"表单验证失败！")
}
}
},
removeFile){
this.setValidate.file = null;
},
back){
this.$router.push{
path:'/XXXX'})
}
}
}
</script>
例二：
简单的上传文件，先把文件上传到input框只展示文件名，不走接口，之后点击确定上传按钮统一上传
<template>
<div>
<Col>
<FormItem label="上传文件：" prop="plugin_name">
<Input v-model="setValidate.plugin_name" placeholder="请选择上传文件.ZIP格式)"></Input>
</FormItem>
</Col>
<Col>
<Upload
align="left"
name="file"
:data="'/url?taskid=' + taskid"
:format="['zip']"
:befor-upload="handleUpload"
:on-success="uploadSuccess"
:on-format-error="handleFormatError"
:on-error="uploadleError"
:show-upload-list="false"
v-model="setValidate.plugin_name">
<Button icon="ios-cloud-upload-outline">上传文件</Button>
</Upload>
</Col>
<Col>
<Button type="primary" @click="updown'setValidate')">确定上传</Button>
</Col>
</div>
</template>
<script>
export default {
data ){
return {
loading:false,
setValidate:{
plugin_name:'',
}
}
},
methods:{
//导入之前
handleUploadfile){
let _this = this;
_this.setValdate.plugin_name = file.name;
_this.file = file;
return false
},
//导入成功
uploadSuccessres,file){
let _this = this;
_this.result = res.result;
ifres.result == 'file'){
_this.$Message.infores.err_desc);
}else ifres.result == 'SUCCESS'){
_this.$Message.info"文件上传成功！")
_this.loading = false;
_this.file = null;
}else {
_this.$Message.info"文件上传失败！")
}
},
//文件格式验证失败
handleFormatErrorfile){
this.$Message.errorfile.name + '文件格式不正确，请上传正确的格式文件！');
},
uploadleErrorres,file){
let _this = this;
_this.error = res.result;
_this.$Message.error"文件上传失败，请重新上传！")
},
updown){
let _this = this;
let file1 = _this.file;
_this.$refs['setValidate'].validatevalid)=>{
ifvalid){
_this.$refs.upload.postfile1)
}else{
_this.$Message.error'表单验证失败！')
}
})
}
}
}
</script>