对Excel的数据进行上传首先需要使用xlsx
此文章的上传方式为手动上传(数据解析可在前端进行,也可交由后端处理)

安装插件      npm install xlsx
引入          import XLSX from ‘xlsx’

使用el-upload进行上传 (el-upload在这不再做介绍)

<el-upload
            :show-file-list="true"
            :headers="{ Authorization: token }"
            name="file"
            :limit="1"
            accept=".xlsx,.xls"
            action="/admin/upload"   
            :on-change="handlePreview"
            :on-exceed="handleExceed"
            :on-error="handleError"
            :on-success="handleUpload"
            :auto-upload="false"
            :data="{ standard_id: $route.query.id }"  
            title="点击上传Excel"
        >
            <el-button slot="trigger" size="small" type="primary"
                >选取Excel</el-button
            >
        </el-upload>
        <el-button
            :loading="uploadLoading"
            @click="handleSuccess"
            style="margin-top: 1rem"
            type="primary"
            >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
		
		handleExceed() {
            this.$message.error("单次限一个Excel,更改请删除");
        },
		//如果是上传二进制文件则可不应此步骤 ,选择文件后直接this.$refs.upload.clearFiles()
        handlePreview(file) {
        	//文件信息  
            console.log(file);

            // FileReader : 读取文件内容,只上传文件以下可省略
            const reader = new FileReader();
            reader.readAsBinaryString(file.raw);
            console.log("97", reader);
            reader.onload=ev=>{
            try{
              const f=ev.target.result;
              const workbook=XLSX.read(f,{type:"binary"});
               //工作表名
              const wsname=workbook.SheetNames[0];
              console.log(wsname);
              //转成json,最后ws的格式为 [[],[],[]] 第一个数组为表头, 空数据以#显示
              const ws=XLSX.utils.sheet_to_json(workbook.Sheets[wsname],{header:1,defval:'#'});
              this.excelData=ws;
              console.log(this.excelData);
            }
            catch(e){
              console.log(e);
              return false;
            }
          };
        },
        //上传结果
        handleUpload(response, file, fileList) {
            console.log(response);
            if (response.code === 1) {
                this.$nextTick(() => {
                    this.uploadLoading = false;
                    this.uploaded = true;
                });
                this.$message({ type: "success", message: "文件上传成功" });
                this.$emit("update:dialogVisible", false);
                this.$emit("success", false);
                this.$refs.upload.clearFiles()

            } else {
                this.$message({
                    type: "warning",
                    message: response.message,
                });
                this.$nextTick(() => {
                    this.uploadLoading = false;
                })
            }
        },
		handleSuccess() {
			//上传
		     this.$refs.upload.clearFiles()
             this.$message({ type: "success", message: "文件上传成功" });
        },
Logo

前往低代码交流专区

更多推荐