仵航说 前后端分离,文件上传下载(springBoot+vue+elementUI)仵老大

1.介绍

本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都是可以上传下载的,前端就是一个页面,后端就是一个controller页面,就可以解决,代码不清晰的话,我把这个前端的vue 跟 后端的controller代码,以及本篇文章的MD版本放到了这个链接里  https://wwa.lanzous.com/b0cqr478f 密码:19qb

1.1前端样子


仵航说 前后端分离,文件上传下载(springBoot+vue+elementUI)仵老大_第1张图片

2.前端

2.1先分享一下前端的全部代码

a{

text-decoration:none;

}

2.2分享一下前端template层的代码

2.2.1上传下载template全部代码

:action="uploadUrl"

:before-upload="handleBeforeUpload"

:on-error="handleUploadError"

:before-remove="beforeRemove"

multiple

:limit="5"

:on-exceed="handleExceed"

:file-list="fileList">

点击上传

下载附件

2.2.2 上传代码

:action="uploadUrl"

:before-upload="handleBeforeUpload"

:on-error="handleUploadError"

:before-remove="beforeRemove"

multiple

:limit="5"

:on-exceed="handleExceed"

:file-list="fileList">

点击上传

2.2.3下载代码

下载代码就是一个a标签

下载附件

2.3分享一下前端script代码

a{

text-decoration:none;

}

2.3.1上传script全部代码

主要是对前端做一些限制

handleExceed(files,fileList) {

this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length}个文件,共选择了 ${files.length+fileList.length}个文件`);

},

beforeRemove(file,fileList) {

returnthis.$confirm(`确定移除 ${file.name}?`);

},

handleUploadError(error,file) {

console.log("文件上传出错:"+error)

},

//测试上传文件(注意web的上下文)

handleBeforeUpload(file){

console.log("开始上传,上传的文件为:"+file)

letformData=newFormData();

formData.append("multipartFiles",file);

axios({

method:'post',

url:'http://localhost:8080/file/upload',

data:formData,

headers: {'Content-Type':'multipart/form-data'}

}).then((res)=>{

console.log("文件上传返回:"+res)

}).catch(error=>{

console.log("文件上传异常:"+error)

  })

},

2.3.2在data的return里添加

uploadUrl:'file/upload',

fileList: [],

也就是在data层的 return里写

data(){

return{

    uploadUrl:'http://localhost:8080/file/upload',

        fileList: [],

    }

}

就这样前端就完成了

后端主要就是一个controller层

2.3.3Axios的引入

很重要的一个,因为我的写法不一样可能有不兼容的地方,有的vue不能这么写,所以需要引入一下

直接引入就可以,在script里面,

不会就看我上面分享的

importaxiosfrom'axios'

3.后端

3.1后端全部代码

packagecom.ciic.reporter.updownload.controller;

importorg.apache.tomcat.util.http.fileupload.IOUtils;

importorg.springframework.web.bind.annotation.*;

importorg.springframework.web.multipart.MultipartFile;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importjava.io.*;

importjava.nio.file.Files;

importjava.nio.file.Path;

importjava.nio.file.Paths;

@RestController

@RequestMapping("file")

publicclassCiicUpDownloadController{

privatefinalstaticStringrootPath="E:/attachment/";

@RequestMapping("/upload")

publicObjectuploadFile(@RequestParam("file")MultipartFile[]multipartFiles){

FilefileDir=newFile(rootPath);

if(!fileDir.exists()&&!fileDir.isDirectory()) {

fileDir.mkdirs();

       }

try{

if(multipartFiles!=null&&multipartFiles.length>0) {

for(inti=0;i

try{

//以原来的名称命名,覆盖掉旧的,这里也可以使用UUID之类的方式命名,这里就没有处理了

StringstoragePath=rootPath+multipartFiles[i].getOriginalFilename();

System.out.println("上传的文件:"+multipartFiles[i].getName()+","+multipartFiles[i].getContentType()+","+multipartFiles[i].getOriginalFilename()

+",保存的路径为:"+storagePath);

// 3种方法: 第1种

//                        Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);

// 第2种

Pathpath=Paths.get(storagePath);

Files.write(path,multipartFiles[i].getBytes());

// 第3种

// multipartFiles[i].transferTo(new File(storagePath));

}catch(IOExceptione) {

e.printStackTrace();

                   }

               }

           }

}catch(Exceptione) {

e.printStackTrace();

       }

//前端可以通过状态码,判断文件是否上传成功

return"文件上传成功";

   }

/**

*

* @param fileName 文件名

* @param response

* @return

*/

@RequestMapping("/download")

publicObjectdownloadFile(@RequestParamStringfileName,HttpServletResponseresponse){

OutputStreamos=null;

InputStreamis=null;

try{

// 取得输出流

os=response.getOutputStream();

// 清空输出流

response.reset();

response.setContentType("application/x-download;charset=utf-8");

//Content-Disposition中指定的类型是文件的扩展名,并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的,点保存后,文件以filename的值命名,

// 保存类型以Content中设置的为准。注意:在设置Content-Disposition头字段之前,一定要设置Content-Type头字段。

//把文件名按UTF-8取出,并按ISO8859-1编码,保证弹出窗口中的文件名中文不乱码,中文不要太多,最多支持17个中文,因为header有150个字节限制。

response.setHeader("Content-Disposition","attachment;filename="+newString(fileName.getBytes("utf-8"),"ISO8859-1"));

//读取流

Filef=newFile(rootPath+fileName);

is=newFileInputStream(f);

if(is==null) {

System.out.println("下载附件失败,请检查文件“"+fileName+"”是否存在");

return"下载附件失败,请检查文件“"+fileName+"”是否存在";

           }

//复制

IOUtils.copy(is,response.getOutputStream());

response.getOutputStream().flush();

}catch(IOExceptione) {

return"下载附件失败,error:"+e.getMessage();

       }

//文件的关闭放在finally中

finally

       {

try{

if(is!=null) {

is.close();

               }

}catch(IOExceptione) {

e.printStackTrace();

           }

try{

if(os!=null) {

os.close();

               }

}catch(IOExceptione) {

e.printStackTrace();

           }

       }

//其实,这个返回什么都不重要

return"下载成功";

   }

}

3.2后端定义一个class类

@RestController

@RequestMapping("file")

publicclassCiicUpDownloadController{

}

3.3后端定义一个上传的路径

privatefinalstaticStringrootPath="E:/attachment/";

3.3.1加上上面定义的类也就是

@RestController

@RequestMapping("file")

publicclassCiicUpDownloadController{

    privatefinalstaticStringrootPath="E:/attachment/";

}

3.4后端定义上传方法

@RequestMapping("/upload")

publicObjectuploadFile(@RequestParam("file")MultipartFile[]multipartFiles){

FilefileDir=newFile(rootPath);

if(!fileDir.exists()&&!fileDir.isDirectory()) {

fileDir.mkdirs();

       }

try{

if(multipartFiles!=null&&multipartFiles.length>0) {

for(inti=0;i

try{

//以原来的名称命名,覆盖掉旧的,这里也可以使用UUID之类的方式命名,这里就没有处理了

StringstoragePath=rootPath+multipartFiles[i].getOriginalFilename();

System.out.println("上传的文件:"+multipartFiles[i].getName()+","+multipartFiles[i].getContentType()+","+multipartFiles[i].getOriginalFilename()

+",保存的路径为:"+storagePath);

// 3种方法: 第1种

//                        Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);

// 第2种

Pathpath=Paths.get(storagePath);

Files.write(path,multipartFiles[i].getBytes());

// 第3种

// multipartFiles[i].transferTo(new File(storagePath));

}catch(IOExceptione) {

e.printStackTrace();

                   }

               }

           }

}catch(Exceptione) {

e.printStackTrace();

       }

//前端可以通过状态码,判断文件是否上传成功

return"文件上传成功";

   }

3.4.3加上之前的路径和类就是

@RestController

@RequestMapping("file")

publicclassCiicUpDownloadController{

privatefinalstaticStringrootPath="E:/attachment/";

@RequestMapping("/upload")

publicObjectuploadFile(@RequestParam("file")MultipartFile[]multipartFiles){

FilefileDir=newFile(rootPath);

if(!fileDir.exists()&&!fileDir.isDirectory()) {

fileDir.mkdirs();

       }

try{

if(multipartFiles!=null&&multipartFiles.length>0) {

for(inti=0;i

try{

//以原来的名称命名,覆盖掉旧的,这里也可以使用UUID之类的方式命名,这里就没有处理了

StringstoragePath=rootPath+multipartFiles[i].getOriginalFilename();

System.out.println("上传的文件:"+multipartFiles[i].getName()+","+multipartFiles[i].getContentType()+","+multipartFiles[i].getOriginalFilename()

+",保存的路径为:"+storagePath);

// 3种方法: 第1种

//                        Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);

// 第2种

Pathpath=Paths.get(storagePath);

Files.write(path,multipartFiles[i].getBytes());

// 第3种

// multipartFiles[i].transferTo(new File(storagePath));

}catch(IOExceptione) {

e.printStackTrace();

                   }

               }

           }

}catch(Exceptione) {

e.printStackTrace();

       }

//前端可以通过状态码,判断文件是否上传成功

return"文件上传成功";

   }

}

3.5后端定义下载方法

/**

*

* @param fileName 文件名

* @param response

* @return

*/

@RequestMapping("/download")

publicObjectdownloadFile(@RequestParamStringfileName,HttpServletResponseresponse){

OutputStreamos=null;

InputStreamis=null;

try{

// 取得输出流

os=response.getOutputStream();

// 清空输出流

response.reset();

response.setContentType("application/x-download;charset=utf-8");

//Content-Disposition中指定的类型是文件的扩展名,并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的,点保存后,文件以filename的值命名,

// 保存类型以Content中设置的为准。注意:在设置Content-Disposition头字段之前,一定要设置Content-Type头字段。

//把文件名按UTF-8取出,并按ISO8859-1编码,保证弹出窗口中的文件名中文不乱码,中文不要太多,最多支持17个中文,因为header有150个字节限制。

response.setHeader("Content-Disposition","attachment;filename="+newString(fileName.getBytes("utf-8"),"ISO8859-1"));

//读取流

Filef=newFile(rootPath+fileName);

is=newFileInputStream(f);

if(is==null) {

System.out.println("下载附件失败,请检查文件“"+fileName+"”是否存在");

return"下载附件失败,请检查文件“"+fileName+"”是否存在";

           }

//复制

IOUtils.copy(is,response.getOutputStream());

response.getOutputStream().flush();

}catch(IOExceptione) {

return"下载附件失败,error:"+e.getMessage();

       }

//文件的关闭放在finally中

finally

       {

try{

if(is!=null) {

is.close();

               }

}catch(IOExceptione) {

e.printStackTrace();

           }

try{

if(os!=null) {

os.close();

               }

}catch(IOExceptione) {

e.printStackTrace();

           }

       }

//其实,这个返回什么都不重要

return"下载成功";

   }

3.5.1加上之前定义的路径类和上传方法就是

packagecom.ciic.reporter.updownload.controller;

importorg.apache.tomcat.util.http.fileupload.IOUtils;

importorg.springframework.web.bind.annotation.*;

importorg.springframework.web.multipart.MultipartFile;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importjava.io.*;

importjava.nio.file.Files;

importjava.nio.file.Path;

importjava.nio.file.Paths;

@RestController

@RequestMapping("file")

publicclassCiicUpDownloadController{

privatefinalstaticStringrootPath="E:/attachment/";

@RequestMapping("/upload")

publicObjectuploadFile(@RequestParam("file")MultipartFile[]multipartFiles){

FilefileDir=newFile(rootPath);

if(!fileDir.exists()&&!fileDir.isDirectory()) {

fileDir.mkdirs();

       }

try{

if(multipartFiles!=null&&multipartFiles.length>0) {

for(inti=0;i

try{

//以原来的名称命名,覆盖掉旧的,这里也可以使用UUID之类的方式命名,这里就没有处理了

StringstoragePath=rootPath+multipartFiles[i].getOriginalFilename();

System.out.println("上传的文件:"+multipartFiles[i].getName()+","+multipartFiles[i].getContentType()+","+multipartFiles[i].getOriginalFilename()

+",保存的路径为:"+storagePath);

// 3种方法: 第1种

//                        Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);

// 第2种

Pathpath=Paths.get(storagePath);

Files.write(path,multipartFiles[i].getBytes());

// 第3种

// multipartFiles[i].transferTo(new File(storagePath));

}catch(IOExceptione) {

e.printStackTrace();

                   }

               }

           }

}catch(Exceptione) {

e.printStackTrace();

       }

//前端可以通过状态码,判断文件是否上传成功

return"文件上传成功";

   }

/**

*

* @param fileName 文件名

* @param response

* @return

*/

@RequestMapping("/download")

publicObjectdownloadFile(@RequestParamStringfileName,HttpServletResponseresponse){

OutputStreamos=null;

InputStreamis=null;

try{

// 取得输出流

os=response.getOutputStream();

// 清空输出流

response.reset();

response.setContentType("application/x-download;charset=utf-8");

//Content-Disposition中指定的类型是文件的扩展名,并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的,点保存后,文件以filename的值命名,

// 保存类型以Content中设置的为准。注意:在设置Content-Disposition头字段之前,一定要设置Content-Type头字段。

//把文件名按UTF-8取出,并按ISO8859-1编码,保证弹出窗口中的文件名中文不乱码,中文不要太多,最多支持17个中文,因为header有150个字节限制。

response.setHeader("Content-Disposition","attachment;filename="+newString(fileName.getBytes("utf-8"),"ISO8859-1"));

//读取流

Filef=newFile(rootPath+fileName);

is=newFileInputStream(f);

if(is==null) {

System.out.println("下载附件失败,请检查文件“"+fileName+"”是否存在");

return"下载附件失败,请检查文件“"+fileName+"”是否存在";

           }

//复制

IOUtils.copy(is,response.getOutputStream());

response.getOutputStream().flush();

}catch(IOExceptione) {

return"下载附件失败,error:"+e.getMessage();

       }

//文件的关闭放在finally中

finally

       {

try{

if(is!=null) {

is.close();

               }

}catch(IOExceptione) {

e.printStackTrace();

           }

try{

if(os!=null) {

os.close();

               }

}catch(IOExceptione) {

e.printStackTrace();

           }

       }

//其实,这个返回什么都不重要

return"下载成功";

   }

}

你可能感兴趣的:(仵航说 前后端分离,文件上传下载(springBoot+vue+elementUI)仵老大)