Vue+SpringBoot 上传导入Excel

Vue+SpringBoot 上传导入Excel

前端

使用element-UI组件库上传组件

		//HTML部分  HTML部分
          <el-upload
            size="small"
            class="filter-item"
            name="excelFile"
            ref="upload"
            //可以使用action方式
            // :action="uploadUrl"
            // 大多配合action使用,如果需要headers绑定获取headers方法
            // :headers="headers"
            
            //上传的请求方法绑定 :http-request="uploadUrl"
            :http-request="uploadUrl"
            //上传前的方法
            :before-upload="beforeAvatarUpload"
           	// 选择文件的类型限制
            accept=".xlsm,.xlsx"
            //是否显示上传列表
            :show-file-list="false"
            //上传列表数据
            :file-list="fileList"
            //发生改变回调
            :on-change="handleChange"
          >
            <el-button
              size="small"
              type="primary"
            >导入</el-button>
          </el-upload>
          //Js部分  Js部分
     uploadUrl: function(param) {
      this.isImported=true;
      var form = new FormData();
      form.append("file", param.file);
      //使用post方式调用后台接口 
      api.importExcel(form).then(res => {
          console.log(res);
          //如果每次上传一个文件,不清空可能会产生一些错误
          // this.fileList = [];
        })
        .catch(err => {
          //如果每次上传一个文件,不清空可能会产生一些错误
          // this.fileList = [];
        });
       }
   	  //上传前对上传文件的校验
   	  beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      const extension5 = file.name.split(".")[1] === "xlsm";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension2 && !extension5) {
        this.$message({
          message: "上传模板只能是 xls、xlsx格式!",
          type: "error"
        });
      }
      if (!isLt2M) {
        this.$message({
          message: "上传模板大小不能超过 10MB!",
          type: "error"
        });
      }
      return extension || extension2 || extension5 || (extension4 && isLt2M);
    },

后台接收

 @PostMapping("importExcel")
 @ResponseBody
 public Result importExcel(HttpServletRequest request, HttpServletResponse response) {
  		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
        MultipartFile multipartFile = multipartHttpServletRequest.getFile("file");
 		 if (multipartFile.isEmpty()) {
            return   Result.badRequest("文件不存在",500);
         } else {
            // 获得上传文件的文件名
            String fileName = multipartFile.getOriginalFilename();
            // 获取文件扩展名
            String eName = fileName.substring(fileName.lastIndexOf(".")+1);
            InputStream inputStream = multipartFile.getInputStream();
            //接下来就是对文件内数据进行处理
            //。。。
}

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值