上傳文件同時攜帶選擇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>
<Icon type="ios-cloud-upload" size="52"></Icon>
<p>點擊或拖拽文件至此即可上傳文件</p>
<p>請上傳10GB以內的待測對象，支持.zip格式</p>
</div>
</Upload>
<div v-if="setValidate.file !=null">
文件：{ 
{ 
setValidate.file.name}}
<span @click="removeFile">移除</span>
</div>
</FormItem>
<Spin>正在執行，請稍等...</Spin>
<Row>
<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'].Validate(vaild)=>{ 

if(valid){ 

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)=>{ 

if(res.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:{ 

//導入之前
handleUpload(file){ 

let _this = this;
_this.setValdate.plugin_name = file.name;
_this.file = file;
return false
},
//導入成功
uploadSuccess(res,file){ 

let _this = this;
_this.result = res.result;
if(res.result == 'file'){ 

_this.$Message.info(res.err_desc);
}else if(res.result == 'SUCCESS'){ 

_this.$Message.info("文件上傳成功！")
_this.loading = false;
_this.file = null;
}else { 

_this.$Message.info("文件上傳失敗！")
}
},
//文件格式驗證失敗
handleFormatError(file){ 

this.$Message.error(file.name + '文件格式不正確，請上傳正確的格式文件！');
},
uploadleError(res,file){ 

let _this = this;
_this.error = res.result;
_this.$Message.error("文件上傳失敗，請重新上傳！")
},
updown(){ 

let _this = this;
let file1 = _this.file;
_this.$refs['setValidate'].validate((valid)=>{ 

if(valid){ 

_this.$refs.upload.post(file1)
}else{ 

_this.$Message.error('表單驗證失敗！')
}
})
}
}
}
</script>

總結

以上是生活随笔為你收集整理的vue中上传文件_vue实现文件上传和下载(什么是vue)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。