devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用Axios从前端上传文件并且下载后端返回的文件

作者：繁依Fanyi0 | 2024-05-07 09:39:37

赞

踩

使用Axios从前端上传文件并且下载后端返回的文件

前端代码：

  1. function uploadAndDownload(){
  2.             showLoading();
  3.             const fileInput = document.querySelector('#uploadFile');
  4.             const file = fileInput.files[0];
  5.  
  6.             const formData = new FormData()
  7.             formData.append('file', file)
  8.  
  9.             return new Promise((resolve, reject) => {
  10.                 axios({
  11.                     url: '/generateJrxml',
  12.                     method: 'post',
  13.                     data: formData,
  14.                     responseType: 'blob',
  15.                     headers: {
  16.                      'Content-Type': 'multipart/form-data'
  17.                     }
  18.                 }).then(res => {
  19.                     const { data, headers } = res
  20.                     const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')
  21.                     const blob = new Blob([data], {type: headers['content-type']})
  22.                     let dom = document.createElement('a')
  23.                     let url = window.URL.createObjectURL(blob)
  24.                     dom.href = url
  25.                     dom.download = decodeURI(fileName)
  26.                     dom.style.display = 'none'
  27.                     document.body.appendChild(dom)
  28.                     dom.click()
  29.                     dom.parentNode.removeChild(dom)
  30.                     window.URL.revokeObjectURL(url)
  31.                     })
  32.                     .catch(e => {
  33.                         console.log(e)
  34.                         reject(e)
  35.                     })
  36.             })
  37.         }

后端代码 

  1.     @PostMapping(value = "/generateJrxml", produces = "application/json")
  2.     ResponseEntity<InputStreamResource> generateJrxmlFromExcel(@RequestParam("file") MultipartFile uploadFile){
  3.         try {
  4.             String fileContent = jasperJrxmlGenerateService.generateJrxmlFile(uploadFile)
  5.             byte[] bytes = fileContent.getBytes("UTF-8")
  6.             ByteArrayInputStream bais = new ByteArrayInputStream(bytes)
  7.             HttpHeaders headers = new HttpHeaders()
  8.             headers.add("Content-Disposition", "attachment;filename=" + uploadFile.getOriginalFilename().takeBefore('.') + ".jrxml")
  9.             return ResponseEntity.ok()
  10.                     .headers(headers)
  11.                     .contentType(MediaType.parseMediaType("application/octet-stream"))
  12.                     .body(new InputStreamResource(bais))
  13.         }catch(Exception e){
  14.             HttpHeaders headers = new HttpHeaders()
  15.             return ResponseEntity.internalServerError().headers(headers)
  16.         }
  17.     }

完整的前端代码如下： 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="jasper.css">
  7.     <title>Jasper Helper</title>
  8.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"/>
  9. <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>-->
  10. <!--    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>-->
  11.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  12.  
  13.     <script type="text/javascript">
  14.         function clickUpload(){
  15.             document.getElementById("uploadFile").click();
  16.         }
  17.  
  18.         function showFileName(files){
  19.             const fileName = files[0].name;
  20.             document.getElementById("file-name").innerHTML = fileName;
  21.         }
  22.  
  23.         function showLoading(){
  24.             var file = document.getElementById("uploadFile").value;
  25.             if(file == ''){
  26.                 console.error("please upload file!");
  27.                 alertFileMissing();
  28.             }else{
  29.                 document.querySelector('#load-icon').style.display = "inline-block";
  30.                 console.log('loading')
  31.             }
  32.         }
  33.  
  34.         function closeLoading(){
  35.             document.querySelector('#load-icon').style.display = "none";
  36.             console.log('end loading')
  37.         }
  38.  
  39.         function closeAlert(){
  40.             document.querySelector('#alert').style.display = "none";
  41.         }
  42.  
  43.         function alertFileMissing(){
  44.              document.querySelector('#alert').style.display = "inline-block";
  45.         }
  46.  
  47.         function closeAlertSuccess(){
  48.             document.querySelector('#alertSuccess').style.display = "none";
  49.         }
  50.  
  51.         function alertSuccess(){
  52.              document.querySelector('#alertSuccess').style.display = "inline-block";
  53.         }
  54.  
  55.         function closeAlertFailure(){
  56.             document.querySelector('#alertFailure').style.display = "none";
  57.         }
  58.  
  59.         function alertFailure(){
  60.              document.querySelector('#alertFailure').style.display = "inline-block";
  61.         }
  62.  
  63.         function uploadAndDownload(){
  64.             showLoading();
  65.             const fileInput = document.querySelector('#uploadFile');
  66.             const file = fileInput.files[0];
  67.  
  68.             const formData = new FormData()
  69.             formData.append('file', file)
  70.  
  71.             return new Promise((resolve, reject) => {
  72.                 axios({
  73.                     url: '/generateJrxml',
  74.                     method: 'post',
  75.                     data: formData,
  76.                     responseType: 'blob',
  77.                     headers: {
  78.                      'Content-Type': 'multipart/form-data'
  79.                     }
  80.                 }).then(res => {
  81.                     closeLoading()
  82.                     const { data, headers } = res
  83.                     const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')
  84.                     const blob = new Blob([data], {type: headers['content-type']})
  85.                     let dom = document.createElement('a')
  86.                     let url = window.URL.createObjectURL(blob)
  87.                     dom.href = url
  88.                     dom.download = decodeURI(fileName)
  89.                     dom.style.display = 'none'
  90.                     document.body.appendChild(dom)
  91.                     dom.click()
  92.                     dom.parentNode.removeChild(dom)
  93.                     window.URL.revokeObjectURL(url)
  94.                     alertSuccess()
  95.                     })
  96.                     .catch(e => {
  97.                         closeLoading()
  98.                         console.log(e)
  99.                         alertFailure()
  100.                         reject(e)
  101.                     })
  102.             })
  103.         }
  104.  
  105.  
  106.     </script>
  107. </head>
  108. <body class="jasper-wrap">
  109.     <div class="container overflow-hidden text-center">
  110.         <br/><br/><br/><br/><br/><br/><br/><br/>
  111.         <h3>Jasper Helper</h3>
  112.         <br/>
  113. <!--        <form id="upload-form" action="/generateJrxml" method="post" enctype="multipart/form-data">-->
  114.         <form id="upload-form">
  115.             <input type="file" id="uploadFile" name="file" accept=".xlsx,.xls" style="display:none;" onchange="showFileName(this.files)" required>
  116.             <button type="button" class="btn btn-outline-primary" onclick="clickUpload()">
  117.                 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-file-earmark-arrow-up-fill" viewBox="0 0 16 16">
  118.                     <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.354 9.854a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 8.707V12.5a.5.5 0 0 1-1 0V8.707z"/>
  119.                 </svg>
  120.                 UPLOAD
  121.             </button>
  122.             <br/>
  123.             <div id="file-name"></div>
  124.             <br/>
  125.             <button type="button" class="btn btn-success" onclick="uploadAndDownload()">
  126.                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
  127.                 <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
  128.                 <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
  129.                 </svg>
  130.                 GENERATE
  131.             </button>
  132.         </form>
  133.         <div class="container mt-3">
  134.             <div class="spinner-border text-info" id="load-icon" style="display:none"></div>
  135.         </div>
  136.  
  137.         <div id="alert" class="alert alert-warning" style="display:none">
  138.             <a href="#" class="close" data-dismiss="alert" onclick="closeAlert()">
  139.                 &times;
  140.             </a>
  141.             <strong>ERROR！</strong>Please upload file!
  142.         </div>
  143.  
  144.         <div id="alertFailure" class="alert alert-warning" style="display:none">
  145.             <a href="#" class="close" data-dismiss="alert" onclick="closeAlertFailure()">
  146.                 &times;
  147.             </a>
  148.             <strong>ERROR！</strong>Failed to generate JRXML file!
  149.         </div>
  150.  
  151.         <div id="alertSuccess" class="alert alert-success" style="display:none">
  152.             <a href="#" class="close" data-dismiss="alert" onclick="closeAlertSuccess()">&times;</a>
  153.             <strong>SUCCESS!</strong> JRXML file generated successfully!
  154.         </div>
  155.  
  156.     </div>
  157. </body>
  158. </html>

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/548519
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号