【Vue】+【SpringBoot】前后端分离—添加导入表格

后端修改：

controller层：

/**
     * 导入画册信息列表
     */
@PostMapping("/importData")
@ResponseBody
public AjaxResult importData(MultipartFile file, boolean updateSupport) throws Exception
{
	ExcelUtil<Xxxx> util = new ExcelUtil<Xxxx>(Xxxx.class);
	List<Xxxx> xxxxList = util.importExcel(file.getInputStream());
	String message = xxxxService.importXxxx(xxxxList, updateSupport);
	return AjaxResult.success(message);
}

service层：

String importXxxx(List<Xxxx> xxxxList, boolean updateSupport);

/**
     * 导入数据
     *
     * @param xxxxList 数据列表
     * @param updateSupport 是否更新支持，如果已存在，则进行更新数据
     * @return 结果
     */
    @Override
    public String importXxxx(List<Xxxx> xxxxList, boolean updateSupport)
    {
        if (StringUtils.isNull(xxxxList) || xxxxList.size() == 0)
        {
            throw new ServiceException("导入用户数据不能为空！");
        }
        int successNum = 0;
        int failureNum = 0;
        StringBuilder successMsg = new StringBuilder();
        StringBuilder failureMsg = new StringBuilder();
        for (Xxxx xxxx : xxxxList)
        {
            try
            {
                if (!updateSupport){
                    xxxxMapper.insertXxxx(xxxx);
                    successNum++;
                    successMsg.append("<br/>" + successNum + " 导入成功");
                }
                else {
                    xxxxMapper.updateXxxx(xxxx);
                    successNum++;
                    successMsg.append("<br/>" + successNum  + " 更新成功");
                }
            }
            catch (Exception e)
            {
                failureNum++;
                String msg = "<br/>" + failureNum  + " 导入失败：";
                failureMsg.append(msg + e.getMessage());
            }
        }
        if (failureNum > 0)
        {
            failureMsg.insert(0, "很抱歉，导入失败！共 " + failureNum + " 条数据格式不正确，错误如下：");
            throw new ServiceException(failureMsg.toString());
        }
        else
        {
            successMsg.insert(0, "恭喜您，数据已全部导入成功！共 " + successNum + " 条，数据如下：");
        }
        return successMsg.toString();
    }

domain层：

   变量声明要加@Excel，但是如果用代码生成的话已经自动添加过了，不需要修改

前端：

按钮：

<el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
          v-hasPermi="['system:brochure:import']">导入</el-button>
      </el-col>

弹窗：

<!-- Excel导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate">下载模板</el-link>
        </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>

添加参数

import {getToken} from "@/utils/auth";

data() {
      return {
        // 导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/brochure/importData"
      },
      };
 },

方法：

/**导入excel表*/
    handleImport() {
      this.upload.title = "导入画册表"
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('/system/brochure/export', {
        ...this.queryParams
      }, `画册表${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();
    },

上面是无权限，所有人都可导入的写法，如果要验证权限，按照若依自带的权限认证，在后端controller中加：

@PreAuthorize("@ss.hasPermi('system:XXXX:import')")

若需要记录进日志则再加一行

 @Log(title = "XXXX", businessType = BusinessType.IMPORT)