: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代码
importaxiosfrom'axios'
import{uuid}from'vue-uuid';
exportdefault{
data() {
return{
form: {
reportName:'',
reportEnName:'',
reportChEnName:'',
remarks:'',
code:'',
isPublic:'1',
isPrinting:"1",
isExport:"1",
datas:[{},{},{},{}],
A0010011:'',
A0010012:'',
A0010013:'',
A0010014:'',
},
// uuid1:'',
// cusList:{},
uploadUrl:'file/upload',
fileList: [],
}
},
created() {
console.log("上个页面传来的是",sessionStorage)
// this.handleUUIDv1()
this.form.code=this.$uuid.v1()
console.log("页面刷新后新产生的uuid是",this.form.code)
},
watch:{
reportName:function(newVal,oldVal) {//新值和原值
console.log("name改变了 a:"+newVal+" b:"+oldVal)
}
},
methods: {
//使用uuid
// handleUUIDv1() {
// this.uuid1 = this.$uuid.v1()
// },
//点击多选按钮true和false变成1或者2
reset(form){
this.$refs['form'].resetFields();
},
//获取上个页面传来的数据
getcustomQuery() {
letreportName=this.form.reportName
sessionStorage.setItem("reportName",reportName)
letreportEnName=this.form.reportEnName
sessionStorage.setItem("reportEnName",reportEnName)
letreportChEnName=this.form.reportChEnName
sessionStorage.setItem("reportChEnName",reportChEnName)
letremarks=this.form.remarks
sessionStorage.setItem("remarks",remarks)
letcode=this.form.code
sessionStorage.setItem("code",code)
letisPublic=this.form.isPublic
sessionStorage.setItem("isPublic",isPublic)
letisPrinting=this.form.isPrinting
sessionStorage.setItem("isPrinting",isPrinting)
letisExport=this.form.isExport
sessionStorage.setItem("isExport",isExport)
console.log("上个页面传来的是",sessionStorage)
},
// this.$router.push('/reportTools/cusMain'),点击保存发送链接 并跳转
tocustomQuery(){
this.$router.push('/reportTools/customQuery')
},
saveResource(){
console.log("当前页面表单的数据",this.form)
// sessionStorage.setItem("params",JSON.stringify(this.form))
console.log("sessionStorage中的数据",sessionStorage)
this.getcustomQuery()
this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then(
resp=>{
console.log(resp)
//this.$router.push('/reportTools/cusMain')
})
},
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)
})
},
}
}
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"下载成功";
}
}