vue上传文件和下载文件

背景：最近使用vue进行前端开发，难免会遇到需要上传文件和文件下载的，但el-upload直接上传的方式不符合我的要求，就改了一下实现方式。

element地址

1. 利用el-upload实现文件上传，不需要直接上传，需要携带其他表单参数或者其他情况下，可以使用以下方法

<template>
	<div>
		
		<!-- 上传文件 -->
		<el-upload
			class="upload-demo"
			action="https://jsonplaceholder.typicode.com/posts/" //我不需要直接上传，我只需要拿到这个文件
			:before-upload = "getUploadFile" //上传之前做处理
			:limit="1"
			:on-exceed="handleExceed"
		>
			<el-button size="small" type="primary">查找文件</el-button>
		</el-upload>
		<div class="el-upload__tip">{{"" == this.uploadFileName ? "暂无文件上传" : this.uploadFileName}}</div>
		<el-button type="primary" @click="uploadFile">确 定</el-button>
	</div>
</template>

<script>
export default {
  	name: "manageFile",
	data() {
		return {
			uploadFileName: "",
			file: null
	   }
	},
	methods: {
	   handleExceed(files, fileList) {
	     this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	   },
	   getUploadFile(file){
	   	//返回false，表示终止上传，这边我就拿到需要上传的文件了
	     this.uploadFileName = file.name;
	     this.file = file;
	     return false;
	   },
	   /**
	    * 上传文件
	    */
	   uploadFile(){
	     if(null != this.uploadCategoryForm.file){
	     //这边可以携带参数，id，code，name什么的
	       let formData = new FormData();
	       formData.append('file',this.uploadCategoryForm.file);
	       //这个是axios方法，你自己的方法
	       upload(formData).then(result =>{
	            console.info("上传结果");
	       });
	     }else{
	     	console.info("请选择上传的文件！");
	     }
	   }
	}
}
</script>

2. 实现文件下载，后端返回文件流，前端触发事件，不做跳转，直接下载

/**
     * 下载文件
     * @param docId
     */
    downloadFile(){
      var elemIF = document.createElement('iframe');
      //这是你后端拼接的url，和axios请求url写法一样，一般为了解决跨域问题，都会做代理，所以一般不会把ip地址拼接上去
      elemIF.src = url;
      elemIF.style.display = 'none';
      //将iframe放到body后面
      document.body.appendChild(elemIF);
    }

总结：不过作啥前端，总是会遇到上传下载的问题，跨域的问题~