spring boot搭建檔案伺服器解決同時上傳多個圖片和下載的問題
在平時的業務場景中,避免不了,要搭建檔案上傳伺服器,作為公共服務。一般情況,只做了單個檔案的上傳,實際業務場景中,卻發現單個檔案上傳,並不能滿足一些業務需求,因此我們需要解決如何寫一個同時上傳多個檔案的介面,並返回可下載的檔案地址;
廢話不多講,不再從頭建立一個 Spring boot 專案,如果不知道的話,請直接前往官網檢視例項。
下面我們以上傳圖片為例,示例相對簡單,僅供參考:
1 後端上傳圖片介面邏輯
UploadController.java package com.zz.controllers.fileUpload; import com.zz.Application; import com.zz.model.Response; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Value; import org.springframework.boot.web.server.LocalServerPort; import org.springframework.context.annotation.Configuration; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.*; import java.net.Inet4Address; import java.net.InetAddress; import java.nio.file.Path; import java.util.ArrayList; import java.util.UUID; import static com.zz.config.ConfigConstants.getFileDir; @RestController @Configuration public class UploadController { private static final Logger log = LoggerFactory.getLogger(Application.class); @Value("${server.port}") private String port; //獲取當前IP地址 public String getIp() { InetAddress localhost = null; try { localhost = Inet4Address.getLocalHost(); } catch (Exception e) { log.error(e.getMessage()); e.printStackTrace(); } return localhost.getHostAddress(); } @PostMapping(value = "/upload",consumes = {"multipart/form-data"}) public Response upload(@RequestParam("file") MultipartFile[] files,Response response) { log.info("上傳多個檔案"); StringBuilder builder = new StringBuilder(); // file address String fileAddress ="http://"+ getIp()+ ":" + port + File.separator; ArrayList<String> imgUrls = new ArrayList<String>(); try { for (int i = 0; i < files.length; i++) { // old file name String fileName = files[i].getOriginalFilename(); // new filename String generateFileName = UUID.randomUUID().toString().replaceAll("-","") + fileName.substring(fileName.lastIndexOf(".")); // store filename String distFileAddress = fileAddress + generateFileName; builder.append(distFileAddress+","); imgUrls.add(distFileAddress); // generate file to disk files[i].transferTo(new File(getFileDir() + generateFileName)); } } catch (Exception e) { e.printStackTrace(); } response.setMsg("success"); log.info(builder.toString()); response.setData(imgUrls); return response; } }
相對於單個檔案的接收,我們這裡直接接受多個 file 物件,然後遍歷生成每個對應的地址。
其中:
getFileDir 設定存放圖片的地址,我選擇存在專案外的其他地方
com.zz.config.ConfigConstants.getFileDir package com.zz.config; public class ConfigConstants { public static String fileDir; public static String getFileDir() { fileDir = "/Users/wz/projects/blog/uploadFile/"; return fileDir; } }
當我們把檔案生成到指定的資料夾後,我們如何配置在當前server下訪問專案外的靜態檔案圖片資源並可以下載呢?
這個我們就要利用 spring boot配置檔案 application.yml,當前還有其他方法比如 WebMvcConfigurer 這裡不再贅述。
application.yml pring: jpa: show-sql: true hibernate: ddl-auto: update servlet: multipart: max-file-size: 10MB max-request-size: 10MB profiles: active: dev # 靜態資源配置 mvc: static-path-pattern: /** resources: static-locations: file:/Users/wz/projects/blog/uploadFile/,classpath:/static/,classpath:/resources/,classpath:/file/,classpath:/templates/ server: use-forward-headers: true tomcat: remote-ip-header: X-Real-IP protocol-header: X-Forwarded-Proto #自定義 my: tokenURL: "55555" authURL: "88888"
這樣之後我們在生成的結果中的 http://192.168.31.77:8080/a7ef32e3922b46aea256a93dd53de288.png,這樣的地址就可以把檔案實質性的指向了 file:/Users/wz/projects/blog/uploadFile/,這樣大致就是一個簡單檔案伺服器的配置了,當然遠不及此,還有壓縮一類的功能,後續再聊。
後端邏輯已經很清晰;
那前端如何向後端同時傳送多個 file 物件呢?
2 前端多個檔案上傳如何傳參
html
<input type="file" multiple class="el-upload" accept="image/*" name="file">
js
//upload var uploadBtn = document.querySelector('.el-upload'); uploadBtn.onchange = function (e) { let files = this.files; console.log(this.files); const xhr = new XMLHttpRequest(); xhr.open("post","/upload",true); // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function () { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { console.log(JSON.parse(this.responseText)); const {data} = JSON.parse(this.responseText); if(!data) return; const imageList = data.slice(0); let imageStr = ''; imageList.forEach(img=>{ imageStr += `<img src="${img}" />`; }); document.getElementById("result").innerHTML = imageStr; } }; const formData = new FormData(); // 多個file 同時上傳 if(files && files.length){ for (let i=0;i<files.length;i++) { formData.append("file",files[i]) } } console.log(formData); xhr.send(formData); };
前端通過 FormData 傳引數傳送POST請求;
區別於之前的單個 formData.append(); 這裡我們可以同時 append 多個相同名字的檔案二進位制檔案流;
![image-20191123234150228](assets/image-
.png)
如圖結果正常顯示,當我們部署到伺服器的時候,這個就可以當作一個web伺服器供大家使用。