vue+elementUI的文件上传和文件下载

项目需求：
一个功能可以导入表格数据，还有模板提供下载参考


大致的功能需求就是这样了，上传文件的组件用的是element-UI自带的组件

配置参数：

我使用的是手动上传模块

参数	说明
action	必选参数，上传的地址
multiple	是否支持多选文件
limit	最大允许上传个数
on-exceed	文件超出个数限制时的钩子
http-request	覆盖默认的上传行为，可以自定义上传的实现
:before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
file-list	上传的文件列表
auto-upload	是否在选取文件后立即进行上传

<!----- 上传部分 ----->
 <el-upload
            class="upload-demo"
            ref="upload"
            action=""
            name="excelFile"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
            :http-request="uploadFile"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
            :auto-upload="false"
        >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">
              <p>只能上传excel文件</p> 
            </div>
        </el-upload>
		<!----- 下载按钮 ----->
        <div class="bottom">
          <span @click="download">模板下载</span>
        </div>

js方法部分：

<!----- 上传部分 ----->
handleExceed(){
      this.$notify({
        title: '警告',
        message: '只能上传一个文件哦!,若需要上传其他文件请先移除已选择的文件',
        type: 'warning'
      });
    },
    uploadFile(item){
    	//我的项目要求formdata上传数据
      const form = new FormData();
      form.append('FireAlarmDeviceSn',this.networkPage.DeviceSn)
      form.append('file',item.file)

      this.$axios.post(this.$api.ImportFireAlarmDetector,form).then(res=>{
        console.log("res",res)
        if(res.data.result.success){
          this.$message({
            message: '导入数据成功!',
            type: 'success'
          });
          this.GetDeviceDetectorList();//获取联网部件tablelist
        }else{
          this.$message({
            showClose: true,
            message: `导入失败！${res.data.result.failCause}`,
            type: 'error',
            duration:'6000'
          });
        }
        this.fileList =[]
        this.$refs.network_importDialog.dialogVisible = false
      }).catch(err=>{
        console.log("err",err)
      })

    },
    //上传之前的判断文件大小和格式
    beforeAvatarUpload(file){
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      if (!extension && !extension2) {
           alert("上传模板只能是 xls、xlsx格式!");
      }
    },
    submitUpload(){
      this.$confirm('导入的方式会覆盖现有的记录, 是否继续?', '导入数据', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
      }).then(() => {
          this.$refs.upload.submit();
            
      }).catch(() => {

      });
    
    }

<!----- 下载部分 ----->
 //模板下载，后端配置好地址，只需要用a标签下载即可
    download(){
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = 'http://futest.sctsjkj.com/template/消防火警联网部件设施数据表.xlsx';
      link.click();
    },