el-upload导入功能

<el-col :span="1.5" style="height: 29px; margin-top: -3px;">

? ? ? ? ? <el-button

? ? ? ? ? ? type="success"

? ? ? ? ? ? plain

? ? ? ? ? ? icon="el-icon-upload2"

? ? ? ? ? ? size="mini"

? ? ? ? ? ? @click="handleImport"

? ? ? ? ? >导入病历</el-button>

? ? ? ? ? <el-tooltip class="item" style="height: 29px;" effect="dark" content="导入功能" placement="top">

? ? ? ? ? ? <el-button type="text" icon="el-icon-question"></el-button>

? ? ? ? ? </el-tooltip>

? ? ? ? </el-col>

?

<!-- 导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
      :close-on-click-modal="false"
    >
      <!-- :action="upload.url + '?updateSupport=' + upload.updateSupport" -->
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :disabled="upload.isUploading"
        :action="upload.url"
        :data="{'scaleId': scaleId}"
        :on-progress="handleFileUploadProgress"
        :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">
          <!-- <el-checkbox v-model="upload.updateSupport" />  是否更新已经存在的用户数据 -->
          <el-link type="info" style="font-size: 12px" @click="importTemplate">
            下载模板
          </el-link>
        </div>
        <div slot="tip" class="el-upload__tip" style="color: red">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

?

export default {

? name: "Crfform",

? data() {

? ? return {

?????

// 导入参数

? ? ? upload: {

? ? ? ? // 是否显示弹出层（导入）

? ? ? ? open: false,

? ? ? ? // 弹出层标题（导入）

? ? ? ? title: '',

? ? ? ? // 是否禁用上传

? ? ? ? isUploading: false,

? ? ? ? // // 是否更新已经存在的用户数据

? ? ? ? // updateSupport: 0,

? ? ? ? // 设置上传的请求头部

? ? ? ? headers: { Authorization: 'Bearer ' + getToken() },

? ? ? ? // 上传的地址

? ? ? ? url: process.env.VUE_APP_BASE_API + '/medical/record/importRecord'

? ? ? },

??? }

}

 // 导入--打开导入弹窗
    handleImport() {
      this.upload.title = '导入病历'
      this.upload.open = true
    },
    // 导入--先下载模板操作
    importTemplate() {
      this.download(
        'system/user/importTemplate',
        {
          ...this.queryParams
        },
        `user_${new Date().getTime()}.xlsx`
      )
    },
    // 导入--文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 导入--文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 导入--提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    }

?