前后端分离处理Excel表格上传

*简述:***Excel上传,前后端分离,通过传统ajax上传文件,后台无法得到,因此对前台做了特殊处理,通过from提交方式,直接传流到后台。后台通过POI进行解析。

## 前端代码 ##

  <form id="uploadForm" method="post" enctype="multipart/form-data">
         <input id="prodImageUpload" class="b-position-absolute b-cursor inputstyle" type="file" name="file" style="width:100%;top:5px;right: 0;opacity: 0;">
  </form>

$(function () {
var token = window.sessionStorage.getItem(‘token’);

  var fileObj = $("#prodImageUpload");
  fileObj.change(function(){
      var formData = new FormData($("#uploadForm")[0]);
      $.ajax({
          type: "POST",
          url: BaseURL + '/welfare/upload.ajax?token='+token,
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (data) {
              var obj = $.parseJSON(data);
              alert(obj)
          }
      })
  });

*后端使用MVC

<bean id="multipartResolver" class=
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前后端分离的 springboot 上传 excel 文件可以通过以下步骤实现: 1. 在前端创建一个表单,用于上传 excel 文件。可以使用 HTML5 的 FormData 对象,或者使用第三方库如 axios 或 jQuery。 2. 在后端创建一个接口,用于接收上传excel 文件。可以使用 Spring MVC 的 @PostMapping 注解,接收前端传来的文件流。 3. 在后端对接收到的文件流进行处理,将其转换成 Excel 对象。可以使用 Apache POI 库,读取 Excel 文件并将其转换成 Java 对象。 4. 对 Excel 对象进行解析和处理。可以将其存储到数据库中,或者将其转换成其他格式。 以下是示例代码: 前端代码: ``` <form id="uploadForm"> <input type="file" name="file"/> <button type="submit">上传</button> </form> <script> const form = document.getElementById('uploadForm'); form.addEventListener('submit', async (e) => { e.preventDefault(); const file = e.target.elements.file.files[0]; const formData = new FormData(); formData.append('file', file); const response = await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); console.log(response.data); }); </script> ``` 后端代码: ``` @PostMapping("/api/upload") public String uploadExcel(@RequestParam("file") MultipartFile file) throws IOException, InvalidFormatException { Workbook workbook = WorkbookFactory.create(file.getInputStream()); Sheet sheet = workbook.getSheetAt(0); // 处理 Excel 对象 return "success"; } ``` 注意事项: 1. 在前端上传文件时,需要指定请求头 Content-Type 为 multipart/form-data。 2. 在后端接收文件时,需要使用 @RequestParam 注解指定参数名,并且参数类型为 MultipartFile。 3. 在使用 Apache POI 读取 Excel 文件时,需要注意文件格式和版本的兼容性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值