快捷導(dǎo)航

spring boot搭建文件服務(wù)器解決同時上傳多個圖片和下載的問題

更新時間：2019年11月24日 15:51:29 作者：非著名程序猿

這篇文章主要介紹了spring boot搭建文件服務(wù)器解決同時上傳多個圖片和下載的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下

在平時的業(yè)務(wù)場景中，避免不了，要搭建文件上傳服務(wù)器，作為公共服務(wù)。一般情況，只做了單個文件的上傳，實際業(yè)務(wù)場景中，卻發(fā)現(xiàn)單個文件上傳，并不能滿足一些業(yè)務(wù)需求，因此我們需要解決如何寫一個同時上傳多個文件的接口，并返回可下載的文件地址；

廢話不多講，不再從頭建立一個 Spring boot 項目，如果不知道的話，請直接前往官網(wǎng)查看實例。

下面我們以上傳圖片為例，示例相對簡單，僅供參考：

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;
 //獲取當(dāng)前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 對象，然后遍歷生成每個對應(yīng)的地址。

其中：

getFileDir 設(shè)置存放圖片的地址，我選擇存在項目外的其他地方

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;
 }
}

當(dāng)我們把文件生成到指定的文件夾后，我們?nèi)绾闻渲迷诋?dāng)前server下訪問項目外的靜態(tài)文件圖片資源并可以下載呢？

這個我們就要利用 spring boot配置文件 application.yml, 當(dāng)前還有其他方法比如 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
 # 靜態(tài)資源配置
 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"

這樣之后我們在生成的結(jié)果中的 http://192.168.31.77:8080/a7ef32e3922b46aea256a93dd53de288.png ,這樣的地址就可以把文件實質(zhì)性的指向了 file:/Users/wz/projects/blog/uploadFile/ ,這樣大致就是一個簡單文件服務(wù)器的配置了，當(dāng)然遠(yuǎn)不及此，還有壓縮一類的功能，后續(xù)再聊。

后端邏輯已經(jīng)很清晰；

那前端如何向后端同時發(fā)送多個 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 傳參數(shù)發(fā)送POST請求；

區(qū)別于之前的單個 formData.append(); 這里我們可以同時 append 多個相同名字的文件二進(jìn)制文件流；

![image-20191123234150228](assets/image-