springboot整合vue實作上傳下載下傳檔案springboot整合vue實作上傳下載下傳檔案

springboot鏁村悎vue瀹炵幇涓婁紶涓嬭澆鏂囦歡

鏂囩珷鐩綍

• springboot鏁村悎vue瀹炵幇涓婁紶涓嬭澆鏂囦歡
• • • 1涓婁紶涓嬭澆鏂囦歡api鏂囦歡
    • 2.涓婁紶澶ф枃浠堕厤缃?/li>
    • 3.vue鍓嶇涓昏閮ㄥ垎

鐜

springboot 1.5.x

瀹屾暣浠ｇ爜涓嬭澆锛?

springboot鏁村悎vue瀹炵幇涓婁紶涓?

1涓婁紶涓嬭澆鏂囦歡api鏂囦歡

璁劇疆涓婁紶璺緞锛屽渚嬪瓙锛?

private final static String rootPath =

System.getProperty(鈥渦ser.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());
        }
        //鏂囦歡鐨勫叧闂斁鍦╢inally涓?        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;
    }
}

           

璁塊棶锛歨ttp://localhost:8080

涓婁紶

鎵歸噺涓婁紶锛?

涓嬭澆锛?

2.涓婁紶澶ф枃浠堕厤缃?/h3>

/**
     * 璁劇疆涓婁紶澶ф枃浠跺ぇ灏忥紝閰嶇疆鏂囦歡灞炴€ц缃棤鏁?     */
    @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>