springboot整合vue实现上传下载文件

水深无声 2022-02-04 02:34 746阅读 0赞

# springboot整合vue实现上传下载文件 #

### 文章目录 ###

*  springboot整合vue实现上传下载文件
 *   *   *  1上传下载文件api文件
         *  2.上传大文件配置
         *  3.vue前端主要部分

**环境**

> springboot 1.5.x

完整代码下载：

[springboot整合vue实现上传下][springboot_vue]

### 1上传下载文件api文件 ###

设置上传路径，如例子：

> private final static String rootPath =  
> System.getProperty(“user.home”)+File.separator+fileDir+File.separator;

api接口：

下载url示例:`http://localhost:8080/file/download?fileName=新建文本文档.txt`

//上传不要用@Controller,用@RestController
    @RestController
    @RequestMapping("/file")
    public class FileController {
        private static final Logger logger = LoggerFactory.getLogger(FileController.class);
        //在文件操作中，不用/或者\最好，推荐使用File.separator
        private final static String  fileDir="files";
        private  final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator;
        @RequestMapping("/upload")
        public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles, final HttpServletResponse response, final HttpServletRequest request){
            File fileDir = new File(rootPath);
            if (!fileDir.exists() && !fileDir.isDirectory()) {
                fileDir.mkdirs();
            }
            try {
                if (multipartFiles != null && multipartFiles.length > 0) {
                    for(int i = 0;i<multipartFiles.length;i++){
                        try {
                            //以原来的名称命名,覆盖掉旧的
                            String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
                            logger.info("上传的文件：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
                                    +"，保存的路径为：" + storagePath);
                             Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
                            //或者下面的
                             // Path path = Paths.get(storagePath);
                            //Files.write(path,multipartFiles[i].getBytes());
                        } catch (IOException e) {
                            logger.error(ExceptionUtils.getFullStackTrace(e));
                        }
                    }
                }
    
            } catch (Exception e) {
                return ResultUtil.error(e.getMessage());
            }
            return ResultUtil.success("上传成功!");
        }
    
        /**
         * http://localhost:8080/file/download?fileName=新建文本文档.txt
         * @param fileName
         * @param response
         * @param request
         * @return
         */
        @RequestMapping("/download")
        public Object downloadFile(@RequestParam String fileName, final HttpServletResponse response, final HttpServletRequest request){
            OutputStream os = null;
            InputStream is= null;
            try {
                // 取得输出流
                os = response.getOutputStream();
                // 清空输出流
                response.reset();
                response.setContentType("application/x-download;charset=GBK");
                response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"), "iso-8859-1"));
               //读取流
                File f = new File(rootPath+fileName);
                is = new FileInputStream(f);
                if (is == null) {
                    logger.error("下载附件失败，请检查文件“" + fileName + "”是否存在");
                    return ResultUtil.error("下载附件失败，请检查文件“" + fileName + "”是否存在");
                }
                //复制
                IOUtils.copy(is, response.getOutputStream());
                response.getOutputStream().flush();
            } catch (IOException e) {
                return ResultUtil.error("下载附件失败,error:"+e.getMessage());
            }
            //文件的关闭放在finally中
            finally
            {
                try {
                    if (is != null) {
                        is.close();
                    }
                } catch (IOException e) {
                    logger.error(ExceptionUtils.getFullStackTrace(e));
                }
                try {
                    if (os != null) {
                        os.close();
                    }
                } catch (IOException e) {
                    logger.error(ExceptionUtils.getFullStackTrace(e));
                }
            }
            return null;
        }
    }

访问：[http://localhost:8080][http_localhost_8080]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70]

上传  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 1]  
批量上传：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 2]  
下载：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 3]

### 2.上传大文件配置 ###

/**
         * 设置上传大文件大小，配置文件属性设置无效
         */
        @Bean
        public MultipartConfigElement multipartConfigElement() {
            MultipartConfigFactory config = new MultipartConfigFactory();
            config.setMaxFileSize("1100MB");
            config.setMaxRequestSize("1100MB");
            return config.createMultipartConfig();
        }

### 3.vue前端主要部分 ###

<template>
        <div style="top:100px;width:300px">
            <el-form :model="form" label-width="220px">
                <el-form-item label="请输入文件名" required>
                    <el-input v-model="form.fileName" auto-complete="off" class="el-col-width" required></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="handleDownLoad">下载</el-button>
                </el-form-item>
                <el-form-item>
                    <el-upload class="upload-demo" :action="uploadUrl" :before-upload="handleBeforeUpload"  :on-error="handleUploadError" :before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">一次文件不超过1Gb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
    
        </div>
    </template>

[springboot_vue]: https://github.com/2010yhh/springBoot-demos/tree/master/springboot-file
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70]: /images/20220204/f8a640732214409a92de30f323700dea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 1]: /images/20220204/35c4e03d159f45eb9d9dc6a0be3b7b81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 2]: /images/20220204/53cd77d4d9764762a98e4adfbe5c0031.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3loaHloaHloaHloaA_size_16_color_FFFFFF_t_70 3]: /images/20220204/8186f1f82e694deea0849fb793fbf3ff.png