上传文件同时携带选择form表单的其他内容
例一：
接口需要传文件以及其他内容的参数，这里需要formdata封装再提交数据
代码语言：javascript复制<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'].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框只展示文件名，不走接口，之后点击确定上传按钮统一上传
代码语言：javascript复制<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>发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/184365.html原文链接：https://javaforall.cn
