Vue——实现文件上传(单文件)和文件下载

一、文件上传

		<el-input v-model="fileName"></el-input>
        <el-button @click="choseFile" plain
          ><span class="upLoad iconfont icon-shangchuan"></span
          >点击上传</el-button
        >
        <input
          id="fileInput"
          style="display:none;"
          type="file"
          @change="addFile"
          ref="inputer"
          accept="application/x-gzip"
          @click="test"
        />
        <el-button @click="submitFile">提交</el-button>

import { api } from '@/services/API';

data(){
	return {
		formData: new FormData(),
        fileName: '',
		file: {},
		emptyFile: ''
		}
	}

methods:{
    test() {
      this.formData = new FormData();
      this.emptyFile = this.$refs.inputer[0].files;
    },
    choseFile() {
      // 选择文件
      let fileInput = document.getElementById('fileInput');
      fileInput.click();
    },
    addFile() {
      // 添加文件
      let inputDOM = this.$refs.inputer[0];
      if (inputDOM.files[0]) {
        this.file = inputDOM.files[0];
        this.fileName = this.file.name;
        this.formData.append('file', this.file);
      }
    },
	submitFile(){
		api(this.formData).then(res=>{
			console.log('文件上传成功')
            // 清空选中的文件
            this.$refs.inputer[0].files = this.emptyFile;
            this.fileName = '';
		})
	}
}

二、文件下载

window.location.href = 'url';//这个url是你文件下载的路径（后端提供的）
或者：
<a href="url" download="fileName">下载文件</a>
或者：
var link = document.createElement("a");
link.setAttribute("download", "");
link.href = "url";
link.click();