vue中上传文件_vue实现文件上传和下载

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

上传文件同时携带选择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'].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>