el-upload导入功能

         

            type="success"

            plain

            icon="el-icon-upload2"

            size="mini"

            @click="handleImport"

          >导入病历

         

           

         

       

 


    
      
      
        
        
将文件拖到此处,或 点击上传
下载模板
提示:仅允许导入“xls”或“xlsx”格式文件!

 

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()
    }

 

你可能感兴趣的:(javascript,vue.js,前端)