最近在写VUE的上传和下载 记录一下遇到的问题

• 1.上传部分
• 2.前端页面下载

后端上传 后端上传和普通其他的上传一个可以采用普通的文件上传方式就行

  @PostMapping("/pic")@ApiOperation("上传文件")public ResultVO<String> uploadPic(MultipartFile file, String Path,Integer status){return uploadService.uploadPic(file,Path,status);}

然后根据你需要的参数就可以

前端的上传可以参照ivew 组件的上上传示例

##前端这一块我只是用了很简单的一个上传模式，批量上传啊 ，显示上传完成的列表啊啥的都没有
建议看ivew的网站就可以 试着写一个简单的上传 不难的
后面有机会了再慢慢补全。

	   <Uploadshow-upload-listref="upload":format="['jpg','jpeg','png','gif','pdf','doc','docx','xlsx','txt','ppt','xls','xml','mp3','WAV','FLAC','APE','ALAC',  'mp4','avi','zip','7z','rar','exe','mov' ,'mtv' ,'dat' ,'wmv' ,'avi', '3gp' ,'amv' ,'dmv','flv']":max-size="102400":on-format-error="handleFormatError":before-upload="handleUpload"action="https://jsonplaceholder.typicode.com/posts/"><Button icon="ios-cloud-upload-outline" style="color: #3399ff;">上传图标</Button></Upload>

下载：

后端下载 我这一块因为涉及到很多的格式问题 有TXT的pdf .zip的 现在主流的格式的都有 所以我就用简单粗暴的方式 以流的方式下载的接口

@GetMapping("/download")@ApiOperation("下载文件")@ResponseBodypublic HttpServletResponse download( Integer mediaId , HttpServletResponse response) {if (mediaId == 0 ){return  null;}MediaMaterial mediaMaterial = uploadService.selectByMaterialId(mediaId);String path = mediaMaterial.getMaterialUrl();try {// path是指欲下载的文件的路径。File file = new File(path);// 取得文件名。String filename = file.getName();// 取得文件的后缀名。String ext = filename.substring(filename.lastIndexOf(".") + 1).toUpperCase();int i1 = path.lastIndexOf(".");String substring = path.substring(i1);System.out.println(substring);String fileNameTrue = mediaMaterial.getMaterialName()+substring;// 以流的形式下载文件。InputStream fis = new BufferedInputStream(new FileInputStream(path));byte[] buffer = new byte[fis.available()];fis.read(buffer);fis.close();// 清空responseresponse.reset();// 设置response的Headerresponse.addHeader("Content-Disposition", "attachment;filename=" + new String(fileNameTrue.getBytes("UTF-8"),"iso8859-1"));response.addHeader("Content-Length", "" + file.length());OutputStream toClient = new BufferedOutputStream(response.getOutputStream());response.setContentType("application/octet-stream");toClient.write(buffer);toClient.flush();toClient.close();} catch (IOException ex) {ex.printStackTrace();}return response;}

前端下载我直接简单粗暴的下载方式：

downloadMedai(row) {window.location.href ="http://10.12.11.75:32000/Media/uploadMedia/download?mediaId=" +row.materialId;},

采用这种的原因也是因为 后缀格式太多了(看上传的那快的格式要求)（格式要求能不能不填 应该可以吧 没试过 ） 用其他的blob的方式还要设置文件名，太麻烦了 所以就直接用这种浏览器下载的这种

很简单粗暴 就先这样的吧 在angular上我前端试着用过创建a标签的那种下载方式，但是请求方式是大佬封装的 看不太懂 就没多管 直接拿来用了 有时间再仔细看看

关于Vue 文件上传到服务器上报错301 的问题（2019-8-24：11：56）

• angular 和vue 打包部署都是dist 的包 通过Nginx 反向代理部署在linux上的服务器上 （Nginx 代理配置的内容 可以参考其他Nginx详解的问题 ）
• 我遇到的问题就是部署在linux服务器上的前端项目上传文件的时候 总是报错 413
• 

这个问题在本地启动服务的时候 没有问题 最后经过查询资料才发现 是因为经过Nginx 服务器请求的时候
具体参数这篇博文的详细介绍
关于上传文件413错误：http请求出现413错误码
解决方案：413 错误解决方案
或者最简单的： 在 nginx.conf 配置文件 http{ } 里面添加
client_max_body_size 8M;(配置请求体缓存区大小, 不配的话)
client_body_buffer_size 128k;(设置客户端请求体最大值)
fastcgi_intercept_errors on;
最后 services restart nginx 重启nginx 就行

总结

写的不对的地方 希望指出 一起学习进步