导入文件（vue-element-ui）

html部分

导入按钮：

<el-button class="importBtn" @click="handleAddTop">导入</el-button>

导入对话框：

<!-- 小区信息导入对话框 -->
          <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :http-request="handleFileUpload" :on-success="handleFileSuccess" :auto-upload="false" drag>
              <i class="el-icon-upload" />
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div slot="tip" class="el-upload__tip" style="color:#ff0000">提示：仅允许导入“xls”或“xlsx”格式文件！
                <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
              </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitFileForm">确 定</el-button>
              <el-button @click="handleFileCancel">取 消</el-button>
            </div>
          </el-dialog>

js部分

data(){}里面：

// 小区信息导入参数
      upload: {
        open: false, title: '', isUploading: false, headers: { Authorization: getToken() },
        url: process.env.VUE_APP_BASE_API + '/sys/community/import' // 上传的地址
      },

methods:{}里面：

// 小区信息导入
    handleAddTop() {
      this.upload.title = '小区信息导入'
      this.upload.open = true
    },
// http-request(请求)
    handleFileUpload(val) {
      const formData = new FormData()
      formData.append('file', val.file)
      batchAddCommunity(this.$store.getters.id, 2, formData).then(res => {
        val.onSuccess()
      }).catch(res => {
        val.onError(res)
      })
    },
 // on-success（文件上传成功处理）
    handleFileSuccess() {
      this.$refs.upload.clearFiles()
      this.upload.open = false
      this.upload.isUploading = false
      this.getList()
    },
 // 下载模板操作
    importTemplate() {
      importCommunityTemplates().then(res => {
        fileDownload(res, '小区信息导入模板.xlsx')
      }).catch(err => {
        console.log(err)
      })
    },
// 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
 // 导入弹出框取消
    handleFileCancel() {
      this.$refs.upload.clearFiles()
      this.upload.open = false
      this.upload.isUploading = false
    },

api

// 下载小区信息导入模板
export function importCommunityTemplates() {
  return request({
    url: '/sys/community/template-import',
    method: 'get',
    responseType: 'arraybuffer'
  })
}
// 导入小区信息
export function batchAddCommunity(id, merchantId, data) {
  return request({
    url: '/sys/community/import',
    method: 'post',
    params: {
      id: id,
      merchantId: merchantId
    },
    data: data
  })
}