Axios+Spring Boot實現檔案上傳和下載

@PostMapping("your/path")
public ResultData courseCoverUpload(@RequestBody MultipartFile file){
    /**
    your service
    */
}

//file為檔案物件
function upload(file){
    //請求頭設定
    const header={"Content-type":"multipart/form-data"}
    let formData=new FormData();
    //用file作為key沒問題，其他沒試過
    formData.append("file",file);
       //這裡request封裝過，也可以直接使用axios.post()
    request.post(`path`,formData,{headers:header}).then(res=>{
        //your serivce
    })
}

<el-upload
      class="upload-demo"
      :auto-upload="false"
      action
      :http-request="uploadFile"
      ref="upload"
      >
          <el-button type="text">點選上傳</el-button>
</el-upload>

function uploadFile(param){
    //param中的file才是真正的檔案體，用於傳入axios上傳方法的引數
    upload( param.file )
},

@PostMapping("up")
public ResultData uploadTest(
    @RequestPart("file") MultipartFile file, 
    @RequestPart("other") Map<String,String> props
    ){
    return ResultData.success().data("file_size",file.getSize()).data("others",props);
}

function  uploadFile(file_body,other_json){

    //頭資訊不變
    const header={"Content-type":"multipart/form-data"}
    //依舊用FormData作資料封裝
    let form_data=new FormData();
    //此處的key要與後端統一，這裡都使用file
    form_data.append("file",file_body)
    //再封裝其他引數時需要使用Blob，[]不要錯，type一定要加
    form_data.append( "other",new Blob([JSON.stringify(other_json)],{type:"application/json"}))
    //這裡request封裝過，也可以直接使用axios.post()
    request.post(url,form_data,{headers: header}).then(rs=>{
      console.log(rs);
    })
}

public class FileFilter implements Filter , InputOutputUtil {
    @Override
    public void doFilter(ServletRequest servletRequest,
                         ServletResponse servletResponse,
                         FilterChain filterChain) throws IOException, ServletException {
        /** 本次後端預設前端使用Get請求進行下載，如若get需要傳遞引數可以用getParameter方式獲取
            HttpServletRequest request = (HttpServletRequest) servletRequest;
            System.out.println(request.getParameter("a"));
        */
        //獲取檔案輸出流，這裡是讀取原生的
        File  f= new File("file_path");
        InputStream inpurStream = new FileInputStream(file);
        /** 如果檔案資源在其他伺服器上（比如阿里雲的OSS），可以用以下程式碼獲取檔案流
        URLConnection urlConn = new URL("URL_PATH").openConnection();
        urlConn.connect();
        InputStream inputStream = urlConn.getInputStream();
        */
        
        //輸出方法，放在了自己編寫的InputOutputUtil中
        this.writeFile(servletResponse,"security_key.jpg",inputStream);
    }
}

public interface InputOutputUtil {
    //輸出檔案時用
    default void writeFile(ServletResponse servletResponse,
                           String fileName,InputStream inputStream) throws IOException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        //設定返回的頭資訊
        response.setContentType("application/octet-stream");
        response.setCharacterEncoding("UTF-8");
        response.addHeader("Content-disposition", "attachment;filename=""+fileName+""");
        
        //跨域處理
        response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE");
        response.setHeader("Access-Control-Allow-Headers","*");
        response.setHeader("Access-Control-Max-Age","false");
        response.setHeader("Access-Control-Allow-Credentials","10");
        
        //獲取輸出流
        ServletOutputStream outputStream=response.getOutputStream();
        //將檔案流逐一放入輸出流中列印給前端
        byte[] bs1=new byte[1024];
        int length;
        while((length=inputStream.read(bs1))!=-1){
            outputStream.write(bs1,0,length);
        }
        //關流操作
        outputStream.close();
        inputStream.close();
    }
}

function downloadFile(url,param=null){
    //設定頭資訊
    let config = {responseType:'blob'}
    //如若前端有引數就加入一下
    if (param!=null) config["params"]=param
    //帶著頭資訊和請求引數發起請求
    request.get(url,config).then(res=>{
        //如若成功了，開始拆箱
        //獲取filename，這裡使用的是正規表示式，關聯 輔助輸出介面 的第9行
        let file_name=res.headers["content-disposition"].match(/filename="(S*)"/)[1]
        //data中裝的是檔案體，需要使用Blob流可以下載
        let blob = new Blob([res.data])
        
        //網上最常用的下載方法
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob); //建立下載的連結
        downloadElement.href = href;
        downloadElement.download = file_name; //下載後檔名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //點選下載
        document.body.removeChild(downloadElement); //下載完成移除元素
        window.URL.revokeObjectURL(href); //釋放blob物件
    })
}