前端vue excel文件流导入两种方式

说明: 两种导入都可以使用, 第二种方法更简洁

1. 第一种导入文件方式

1-1. 使用组件

                          <div class="upload-excel">
                                <el-upload id="eccel"
                                           :disabled="buttonDis?true:false"
                                           class="upload"
                                           ref="upload"
                                           accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                                           :before-upload="beforeAvatarUpload"
                                           :action="uploadUrl()"
                                           :on-success="uploadSuccess"
                                           :headers="headers"
                                           :multiple="false"
                                           :limit="1">
                                    <el-button :disabled="buttonDis" size="small" type="primary"><i
                                            class="el-icon-upload2"></i>&nbsp;导入数据
                                    </el-button>&nbsp;
                                </el-upload>
                            </div>

1-2. 导入事件

            /************导入文件**************/
            //对导入文件校验
            beforeAvatarUpload(file) {
                let excelData = file.name.substring(file.name.lastIndexOf('.') + 1)
                const extension = excelData === 'xls'
                const extension2 = excelData === 'xlsx'
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!extension && !extension2) {
                    this.$message.error('请上传 .xlsx .xls格式的文件!');
                    return false;
                }
                if (!isLt2M) {
                    this.$message.error('上传的文件大小不能超过 10MB!');
                    return false;
                }
                const clearTime = 3;
                let num = 0;
                this.buttonDis = true;
                const timer = setInterval(() => {
                    if (num < clearTime) {
                        num++
                    } else {
                        clearInterval(timer)
                        this.$refs.upload.clearFiles()
                        this.buttonDis = false;
                    }
                }, 1000);
                return (extension || extension2) && isLt2M
            },


            //导入excel路径
            uploadUrl() {
                return (process.env.VUE_APP_BASE_API + '/system/feedingcurve/excel');
            },


            //导入成功返回信息
            uploadSuccess(file) {
                if (file.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '导入成功,请等待数据解析!'
                    });
                    this.$refs.mychild.getAllCurves(0, "", this.majorType);
                } else {
                    this.$message.error(file.desc);
                }
            },

2. 第二种导入文件方式

2-1.使用组件

        <div class="moban">
          <el-upload class="upload-demo" :on-change='fileUpload' :auto-upload="false" action='' accept=".xlsx" :show-file-list="false">
            <el-button icon="el-icon-circle-plus-outline" type="primary">导入设备</el-button>
          </el-upload>
          
        </div>

2-2. 导入事件

import { uploadBatchDeviceTemplate } from '@/axios/api'

    //导入事件
    fileUpload (file) {
      console.log(file)
      if (!file) return;
      uploadBatchDeviceTemplate({ file: file.raw }).then((res) => {
        if (res.code == 200) {
          this.$message.success('导入成功！')
          this.fetchDataSearch()
        } else {
          this.$message.error('导入失败！')
        }

      })
    },