前端读取导入数据

最新推荐文章于 2024-12-17 10:48:23 发布

aitengteng1

最新推荐文章于 2024-12-17 10:48:23 发布

阅读量442

点赞数 10

文章标签：前端 python 开发语言

本文链接：https://blog.youkuaiyun.com/aitengteng1/article/details/134944727

版权

<Upload action=""  accept=".xls, .xlsx" :before-upload="handleBeforeUpload" style="float:right;right: 5px;height:32px;">
        <Button type="primary" :loading="uploadLoading"  style="float:right;margin-right: 5px" @click="handleUploadFile">导入</Button>
      </Upload>

handleUploadFile () {
      this.initUpload()
    },
    initUpload () {
        this.file = null
      },
    handleBeforeUpload (file) {
        const fileExt = file.name.split('.').pop().toLocaleLowerCase()
        if (fileExt === 'xlsx' || fileExt === 'xls') {
          this.readFile(file)
          this.file = file
        } else {
          this.$Notice.warning({
            title: '文件类型错误',
            desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
          })
        }
        return false
      },
      // 读取文件
      readFile (file) {
        const reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onloadstart = e => {
          this.uploadLoading = true
        }
      
        reader.onerror = e => {
          this.$Message.error('文件读取出错')
        }
        reader.onload = e => {
          this.$Message.info('文件读取成功')
          const data = e.target.result
          const { header, results } = excel.read(data, 'array')
          let tableTitle = header.map(item => { return { title: item, key: item } })
          let tableData = results
          this.uploadLoading = false
          //保存数据
          this.saveImporeData(tableData);
        }
      },
    saveImporeData(tableData){
      importData(tableData).then(res=>{
        if(res.status===200){
          this.search();
        }
      });
    },