Spring-boot之jQuery File Upload后台配置方法以及前台跨域

文件上傳在Spring-boot中本身配置起來非常簡單，但是有個多文件傳遞和單個傳遞的問題。

兩者配置是略有不同的,而且還有一些讓我這個技術小白很容易踩坑的地方。

重要的幾點：

上傳的是單個文件:  MultipartFile file

上傳的是多個文件： MultipartFile[] file

 

先從單個文件上傳 后台配置來說:

public Map uploadFile(@RequestParam("file") MultipartFile file,HttpServletRequest req) { // 注意的是 MultipartFile file 表示上傳單個文件


　File tempFile = new File( 文件上傳目錄 );
　　if (!tempFile.getParentFile().exists()) {
　　　　tempFile.getParentFile().mkdirs();   // 如果沒有找到上傳的目錄就會創建這個目錄
　　}

　　if (!file.isEmpty()) { 

　　　　try {
　　　　　　BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(tempFile));   // 開始上傳

　　　　　　out.write(file.getBytes());  
　　　　　　out.flush();
　　　　　　out.close();

　　　　} catch (FileNotFoundException e) {

　　　　　　e.printStackTrace();
　　　　　　result.put("msg", "上傳文件產生錯誤," + e.getMessage());
　　　　　　result.put("result", false);

　　　　 }  catch (IOException e) {

　　　　　　....

　　　　}

　　}

　　return result;

}

　　 

spring-boot后台完整代碼：

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/upload")
public class UploadFileController {
    // 存儲文件
    @RequestMapping(value = "/uploadFile",method={RequestMethod.POST})
    public Map uploadFile(@RequestParam("file") MultipartFile file,HttpServletRequest req) {
        Map result = new HashMap<>();
        SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");// 設置日期格式
        String dateDir = df.format(new Date());// new Date()為獲取當前系統時間
        File tempFile = new File(fileDIr + dateDir + File.separator
                + file.getOriginalFilename());
        
        if (!tempFile.getParentFile().exists()) {
            tempFile.getParentFile().mkdirs();
        }
        if (!file.isEmpty()) {
            try {
                BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(tempFile));
                // "d:/"+file.getOriginalFilename() 指定目錄
                out.write(file.getBytes());
                out.flush();
                out.close();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
                result.put("msg", "上傳文件產生錯誤," + e.getMessage());
                result.put("result", false);
            } catch (IOException e) {
                e.printStackTrace();
                result.put("msg", "上傳文件產生錯誤," + e.getMessage());
                result.put("result", false);
            }
            result.put("msg", "上傳成功");
            result.put("result", true);
        } else {
            result.put("msg", "上傳文件為空");
            result.put("result", false);
        }
        return result;
    }
}

 

這段代碼可以直接放到spring-boot中跑，

 

再從多個文件上傳 后台配置來說:

jQuery File Upload 就是一個支持多文件上傳插件，這個時候如果繼續調用上面的單文件上傳的接口就直接前台報錯啦，當然還有其他的原因。

注意以下幾點就好：

1. 由於是多文件，所以上傳過來的是一個數組文件，所以需要用： MultipartFile[] multipartfiles

 2.由於jQuery File Upload的輸入框中：<input id="fileupload" type="file" name="files[]" multiple>

   name="files[]"   這個name需要和  @RequestParam(value ="files[]")的value值相等，這樣就可以上傳文件了。

完整后台代碼

import java.io.File;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/upload")
public class UploadFileController {
    // 存儲文件
    @RequestMapping(value = "/uploadFile",method={RequestMethod.POST})
    public Map uploadFile(@RequestParam(value ="files[]") MultipartFile[] multipartfiles,HttpServletRequest req) {
        Map result = new HashMap<>(); 
       String savePath = '文件目錄';  
       if(null != multipartfiles && multipartfiles.length > 0){  
           //遍歷並保存文件
           for(MultipartFile file : multipartfiles){  
               file.transferTo(new File(savePath + file.getOriginalFilename()));  
           }  
       }
        result.put("msg", "上傳成功");
        result.put("result", true);
        return result;
    }
}

 

最后說一說前端jQuery File Upload的使用方法：

放到spring-boot項目下的static目錄下面:

 

 

這樣就可以了，完了....所以使用起來非常的方便

額，差點忘了，補充一下，通常我們不可能都放在項目目錄下，前后端可能是分離開的。

jQuery File Upload Plugin是支持跨域的!!!

只需要在上傳的文件下面多增加一條配置即可：具體可以看官網  Cross-site iframe transport uploads

 forceIframeTransport: true,