文件上传与合并下载

实现效果为：点击上传按钮调动文件选择 然后显示文件名

点击合并下载 下载两个合并的文件流

 

结构代码

设定formData为全局

逻辑

 

上传与下载统一接口配置

代码cv

 //系统本地文件上传
    sutData (data) {
      // this.$refs.upload_file1.clearFiles()
      this.formData.append('localFile', data.file)
      // this.fileList = []
    },
    //保险公司数据上传
    txtData (data) {
      // this.$refs.upload_file2.clearFiles()
      this.formData.append('piccFile', data.file)

    },
    //合并下载文件流
    async margeData () {
      let response = await this.service.margeData(this.formData)
      let blob = new Blob([response.data], {
        type: 'application/vnd.ms-excel;charset=utf-8',
      })
      let url = window.URL.createObjectURL(blob)
      let aLink = document.createElement('a')
      aLink.style.display = 'none'
      aLink.href = url
      aLink.setAttribute('download', '数据合并.xls')
      document.body.appendChild(aLink)
      aLink.click()
      document.body.removeChild(aLink)
      window.URL.revokeObjectURL(url)
      return

    },

 <!-- 数据合并 ---------------------->
        <el-dialog
          :visible.sync="openShow"
          width="500px"
          title="数据合并下载"
          align="center"
        >
          <div class="div-div-el">
            <img src="../../../public/image/yun.png" alt="" />
            <div class="div-nuv-left">
              <div>系统本地数据上传</div>
              <div>文件为Excel格式，文件大小不要超过20M</div>
              <el-upload
                action
                :http-request="sutData"
                :show-file-list="true"
                :limit="1"
                style="display: inline-block"
              >
                <el-button class="nnm-but button-el-row" type="primary">
                  上传文件
                </el-button>
              </el-upload>
            </div>
          </div>
          <div class="div-div-el">
            <img src="../../../public/image/yun.png" alt="" />
            <div class="div-nuv-left">
              <div>保险公司数据上传</div>
              <div>文件为Excel格式，文件大小不要超过20M</div>
              <el-upload
                action
                :http-request="txtData"
                :show-file-list="true"
                :limit="1"
                style="display: inline-block"
              >
                >
                <el-button class="nnm-but" type="primary">上传文件</el-button>
              </el-upload>
            </div>
          </div>
          <el-button class="button-el" @click="margeData()">合并下载</el-button>
        </el-dialog>