Vue前后端的上传和下载模块以及遇到的问题

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

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

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

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

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

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

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

	   <Upload
          show-upload-list
          ref="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("下载文件")
    @ResponseBody
    public 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();
            // 清空response
            response.reset();
            // 设置response的Header



            response.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 就行

总结

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