vue 中上传文件下载文件按钮

<script>
const tbit = require('../tbit')
// const filebtn = require("./filebtn")
import filebtn from "./control/filebtn"
import pager from "./control/pager.vue"
export default {
  mounted:function (){
    var me = this    
    // this.a()
    this.admin = localStorage.username
    this.query()    
  },
  components:{
    "filebtn":filebtn,
    "pager":pager
  },
  methods:{
    query(){
        this.internalquery(this.search || "",this.page||1)
    },
    async internalquery(search,page){
        var me = this
        this.page = page
        var query = `{user_list(page:${this.page},id:"${search}"){id,username,address,telephone,email,time,OnuId,ONUname,plan,TariffPackageId,actualtime}}`  
        var response = await tbit.ql(query)
        this.items = response.data.data.user_list
        query = `{user_pages(search:"${search}")}`
        var response = await tbit.ql(query)
        this.pages = response.data.data.user_pages     
    },
    //导出
    async doExport(){
      var query = `{download_user{filename,mimetype,content}}`
      let response = await tbit.ql(query)
      let filename = response.data.data.download_user.filename;
      let content = response.data.data.download_user.content;
      this.downloadFile(filename, content);
    },
    downloadFile: function(fileName, content) {
      const blob = this.base64ToBlob(content); // new Blob([content]);
      if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, fileName);
      } else {
      const link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;

      //此写法兼容可火狐浏览器
      document.body.appendChild(link);
      const evt = document.createEvent("MouseEvents");
      evt.initEvent("click", false, false);
      link.dispatchEvent(evt);
      document.body.removeChild(link);
      }
    },
    base64ToBlob: function(code) {
      const parts = code.split(";base64,");
      const contentType = parts[0].split(":")[1];
      const raw = window.atob(parts[1]);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    closeUploadModal:function() {
      let modal = document.getElementById("UploadModal");
      modal.classList.remove("is-active");
    },
    doImport:function() {
      if(confirm('Whether or not to import users')==true){
        let modal = document.getElementById("UploadModal");
        modal.classList.add("is-active");
      }
    },
    //导入
    handlerUpload: async function(e) {
      //获取选定的文件
      var self = this
      let tFiles = e.target.files;
      let len = tFiles.length;
      if (len != 1) {
        alert(this.$i18n.t("Only one file can be uploaded"));
        return;
      }
      //将文件转base64
      let reader = new FileReader();
      reader.readAsDataURL(tFiles[0]);
      reader.onload = async function(e) {
        let query = `mutation{upload_user(fileContent:"${this.result}")}`;
        let response = await tbit.ql(query);
        if (response.data.data.upload_user == true) {
          alert("success");
          let model = document.getElementById("UploadModal");
          model.classList.remove("is-active");
          document.getElementById("file").value='';
          await self.query()
        } else {
          alert("upload file fail");
          document.getElementById("file").value='';
        }
      };
    },
  },
  
  data:function (){
     return {items:this.items,pages:1,page:1,search:"",money:this.money,username:"",actualincome:"",createdAt:"",address:"",telephone:"",admin:"",refundtime:""}
  }
}
</script>
<template>
 <div>
    <div class="hello hidden-print">
        <h1 class="title">title</h1>
        <form class="form is-horizontal">       
            <input type="button" class="button" @click="doImport" value="Import">
            <input type="button" class="button" @click="doExport" value="Export">
        </form>
        <div id="UploadModal" class="modal">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">{{$t("Upload configuration")}}</p>
          <button class="delete" aria-label="close" @click="closeUploadModal"></button>
        </header>
        <section class="modal-card-body">
          <!-- Content ... -->
          <div class="fileBox">
            <input type="file" name="file" id="file" class="inputfile" @change="handlerUpload($event)" />
            <label for="file">
              <i class="fa fa-upload"></i> {{$t("Click for upload a file")}}
            </label>
          </div>
            
        </section>
        <footer class="modal-card-foot">
        </footer>
      </div>
    </div>
</div>
</template>
<style>
.uploadBox {
    width: 400px;
    border: 1px solid #ccc;
    margin: 100px auto;
}

.fileBox,
.fileInfo {
    margin: 16px;
    height: 60px;
    line-height: 60px;
    border: 1px solid #ccc;
    padding-left: 16px;
    font-size: 16px;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/*E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F*/

.inputfile+label {
    color: #3e97df;
    display: inline-block;
}

.inputfile:focus+label,
.inputfile+label:hover {
    color: #0c89f0;
    cursor: pointer;
}

h3 {
    padding: 10px 0 0 16px;
    font-weight: normal;
    font-size: 18px;
    color: #666;
}

.filePart {
    line-height: 30px;
    overflow: hidden;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    height: 30px;
}

.fileStatus {
    overflow: hidden;
    float: left;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
}

.ml10 {
    margin-left: 10px;
}

.fileName {
    width: 200px;
}

.fileSize {
    width: 120px;
    text-align: center;
}

.uploadFail {
    color: #ff0800d3;
}

.uploadSuccess {
    color: #2c832c;
}

/*对应CSS*/

.progress {
    position: relative;
    width: 80%;
    height: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    /*注意这里*/
    box-shadow: 0 0 1px 0px #ddd inset;
}

.progress span {
    position: absolute;
    display: inline-block;
    width: 10%;
    height: 100%;
    background-color: #3e97df;
}
</style>