Springboot+Vue實現批量文件上傳(pdf、word、excel)並支持在線預覽功能

優質文章，及時送達

前端初始頁面

上傳doc，docx，xls，xlsx，ppt，pptx，txt成功頁面

文件在線預覽頁面

JDK：1.8

資料庫：Mysql5.6

前端：Vue

後端：SpringBoot

掃碼關注回復括號內文字【辦公軟體】獲取源碼

如果你在運行這個代碼的過程中有遇到問題，請加小編微信xxf960513，我拉你進對應微信學習群！！幫助你快速掌握這個功能代碼！

pox.xml

<dependency>     <groupId>com.aspose</groupId>     <artifactId>aspose-words</artifactId>     <version>16.8.0</version></dependency><dependency>    <groupId>com.aspose</groupId>    <artifactId>aspose-cells</artifactId>    <version>8.5.2</version></dependency>  <dependency>    <groupId>com.aspose</groupId>    <artifactId>aspose-slides</artifactId>    <version>15.9.0</version></dependency>
UploadParsePdfCtrler.class
package com.yxyz.ctrler;import java.io.FileOutputStream;import java.io.InputStream;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.springframework.beans.factory.annotation.Value;import org.springframework.util.StringUtils;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import com.yxyz.rest.CodeMsg;import com.yxyz.rest.Result;import com.yxyz.util.AsposeUtil;import com.yxyz.util.FileUtil;import com.yxyz.util.StringUtil;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;
@RestController@RequestMapping("/filetopaf")@CrossOrigin@Api(value="文件上傳轉pdf預覽",tags={"文件上傳轉pdf預覽"})public class UploadParsePdfCtrler {    @Value("${web.oring-save-path}")  private String savePath;    @Value("${web.upload-path}")  private String pdftemppath;    @Value("${server.servlet.context-path}")  private String projName;    @PostMapping("/uploadtopdf")  @ApiOperation(value="批量文件上傳轉pdf預覽")  public Object uploadToPdf(HttpServletRequest request,MultipartFile[] files) throws Exception  {    if(null == files || files.length == 0)    {      return Result.error(CodeMsg.NOFILEUPLOAD);    }        projName = StringUtils.isEmpty(projName)?"":projName;        List<Map<String,String>> saveName_orinName_Url = new ArrayList<>();    FileUtil.checkExistDir(savePath);    FileUtil.checkExistDir(pdftemppath);    for(MultipartFile file : files)    {                        String orinName = file.getOriginalFilename();      String preName = StringUtil.getUuid();      String stuffName = orinName.substring(orinName.lastIndexOf("."));      String svName = preName + stuffName;      byte[] cache = new byte[1024];      int hasRead = 0;      InputStream in = file.getInputStream();      FileOutputStream out = new FileOutputStream(savePath+svName);      while((hasRead=in.read(cache, 0, cache.length)) != -1)      {        out.write(cache, 0, hasRead);      }      out.flush();      if(null != out)      {        out.close();      }      if(null != in)      {        in.close();      }            String pdfSaveName = pdftemppath+preName+".pdf";      AsposeUtil.trans(savePath+svName, pdfSaveName);      String httpUrl = request.getScheme() + "://" + request.getServerName()         + ":" + request.getServerPort() +projName+"/"+ preName+".pdf";      Map<String,String> rs = new HashMap<>();      rs.put("oldname", orinName);      rs.put("newname", preName+".pdf");      rs.put("url", httpUrl);      saveName_orinName_Url.add(rs);     }    return Result.success(saveName_orinName_Url);  }}
main.js
import Vue from 'vue'import 'normalize.css/normalize.css' import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import '@/styles/index.scss' import App from './App'import store from './store'import router from './router'
import '@/icons' import '@/permission' if (process.env.NODE_ENV === 'production') {  const { mockXHR } = require('../mock')  mockXHR()}Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({  el: '#app',  router,  store,  render: h => h(App)})
index.vue
<template>  <div class="dashboard-container">    <el-upload      ref="upload"      multiple      class="upload-demo"      action="http://139.159.147.237:8080/yxyz/filetopaf/uploadtopdf"      :on-preview="handlePreview"      :on-remove="handleRemove"      :file-list="fileList"      :before-upload="beforeUpload"      list-type="picture"    >      <el-button slot="trigger" size="small" type="primary">選取文件</el-button>            <div slot="tip" class="el-upload__tip">可以上傳doc/xlsx/pdf</div>    </el-upload>  </div></template><script>export default {  name: 'Dashboard',  components: { },  data() {    return {      fileList: [],      dialogVisible: false,
      pdfUrl: ''    }  },  computed: {},  created() {    this.fileArr = []  },  methods: {    handleRemove(file, fileList) {      console.log(file, fileList)    },    handlePreview(file) {      console.log(file, 'hha')                                    window.open(file.response.data[0].url)    },    beforeUpload(file) {      console.log(file)    }  }}</script><style lang="scss" scoped>.dashboard {  &-container {    margin: 30px;  }  &-text {    font-size: 30px;    line-height: 46px;  }}</style>
--完--
如果你覺得這個案例以及我們的分享思路不錯，對你有幫助，請分享給身邊更多需要學習的朋友。別忘了《留言+點在看》給作者一個鼓勵哦！

1、springboot+mybatis+vue前後端分離實現用戶登陸註冊功能
2、SpringBoot+Vue前後分離實現郵件發送功能
3、SpringBoot+Spring Data JPA+Vue前後端分離實現分頁功能
4、SpringBoot+Spring Data JPA+Vue前後端分離實現Excel導出功能
5、Spring Boot + Vue前後端分離實現圖片上傳功能
6、springboot+jpa+tymeleaf實現分頁功能
7、springboot+jpa+thymeleaf實現信息修改功能
8、SpringBoot+vue開發微信小程序留言功能
9、SpringBoot實現生成帶參數的小程序二維碼功能
10、springboot+jpa+thymeleaf實現信息增刪改查功能
11、用java實現Graphics2D繪製驗證碼功能
12、Springboot+layui前後端分離實現word轉pdf功能
13、用java將本地圖片轉base64格式， 再轉圖片！你用過這個功能？
14、springboot+layui+thymelefe實現用戶批量添加功能
15、springboot+Tymeleaf實現用戶密碼MD5加鹽解密登錄
16、springboot+vue實現用戶註冊後必須通過郵箱激活才能登錄激活才能登錄
17、SpringBoot+Vue實現用戶頭像修改功能
18、Springboot＋Vue實現富文本發表文章功能
19、springboot+vue實現不同管理權限的用戶登陸展示的菜單欄目不同功能
20、Springboot+vue實現上傳視頻並在線播放功能
21、SpringBoot+Vue前後端分離實現郵件定時發送功能
22、springboot+vue實現多圖片同時上傳功能
23、Springboot+Vue前後端分離實現Excle文件導入並在前端頁面回顯功能
24、Springboot+Vue實現從資料庫中獲取數據生成樹狀圖在前端頁面展示功能
25、Springboot+Vue實現從資料庫中獲取數據生成餅狀圖並在前端頁面展示功能
為了方便大家更好的學習，本公眾號經常分享一些完整的單個功能案例代碼給大家去練習，如果本公眾號沒有你要學習的功能案例，你可以聯繫小編（微信：xxf960513）提供你的小需求給我，我安排我們這邊的開發團隊免費幫你完成你的案例。
注意：只能提單個功能的需求不能要求功能太多，比如要求用什麼技術，有幾個頁面，頁面要求怎麼樣？