springboot中怎么利用vue實(shí)現(xiàn)文件上傳下載功能

這篇文章給大家介紹springboot中怎么利用vue實(shí)現(xiàn)文件上傳下載功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),平塘企業(yè)網(wǎng)站建設(shè),平塘品牌網(wǎng)站建設(shè),網(wǎng)站定制,平塘網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,平塘網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1、上傳下載文件api文件

設(shè)置上傳路徑，如例子：

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); //在文件操作中，不用/或者\(yùn)最好，推薦使用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("下載附件失敗，請(qǐng)檢查文件“" + fileName + "”是否存在");    return ResultUtil.error("下載附件失敗，請(qǐng)檢查文件“" + fileName + "”是否存在");   }   //復(fù)制   IOUtils.copy(is, response.getOutputStream());   response.getOutputStream().flush();  } catch (IOException e) {   return ResultUtil.error("下載附件失敗,error:"+e.getMessage());  }  //文件的關(guān)閉放在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

上傳：

批量上傳：

下載：

2.上傳大文件配置

/**  * 設(shè)置上傳大文件大小，配置文件屬性設(shè)置無效  */ @Bean public MultipartConfigElement multipartConfigElement() {  MultipartConfigFactory config = new MultipartConfigFactory();  config.setMaxFileSize("1100MB");  config.setMaxRequestSize("1100MB");  return config.createMultipartConfig(); }

3.vue前端主要部分

<template> <p >  <el-form :model="form" label-width="220px">   <el-form-item label="請(qǐng)輸入文件名" 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">點(diǎn)擊上傳</el-button>     <p slot="tip" class="el-upload__tip">一次文件不超過1Gb</p>    </el-upload>   </el-form-item>  </el-form> </p></template>

關(guān)于springboot中怎么利用vue實(shí)現(xiàn)文件上傳下載功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁名稱：springboot中怎么利用vue實(shí)現(xiàn)文件上傳下載功能
當(dāng)前URL：http://muchs.cn/article36/ighisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、建站公司、動(dòng)態(tài)網(wǎng)站、Google、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)