Springboot+Vue實(shí)現(xiàn)批量文件上傳（pdf、word、excel）并支持在線預(yù)覽功能

<dependency>     <groupId>com.asposegroupId>     <artifactId>aspose-wordsartifactId>     <version>16.8.0version>dependency><dependency>    <groupId>com.asposegroupId>    <artifactId>aspose-cellsartifactId>    <version>8.5.2version>dependency>  <dependency>    <groupId>com.asposegroupId>    <artifactId>aspose-slidesartifactId>    <version>15.9.0version>dependency>

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;/**    * Copyright @ 2020 Zonlyn. All rights reserved.
* @Description: 該類的功能描述**/@RestController@RequestMapping("/filetopaf")@CrossOrigin@Api(value="文件上傳轉(zhuǎn)pdf預(yù)覽",tags={"文件上傳轉(zhuǎn)pdf預(yù)覽"})public class UploadParsePdfCtrler {  //源文件存儲(chǔ)位置  @Value("${web.oring-save-path}")  private String savePath;  //生成pdf緩存位置  @Value("${web.upload-path}")  private String pdftemppath;  //項(xiàng)目訪問名稱  @Value("${server.servlet.context-path}")  private String projName;    @PostMapping("/uploadtopdf")  @ApiOperation(value="批量文件上傳轉(zhuǎn)pdf預(yù)覽")  public Object uploadToPdf(HttpServletRequest request,MultipartFile[] files) throws Exception  {    if(null == files || files.length == 0)    {      return Result.error(CodeMsg.NOFILEUPLOAD);    }    //判斷是否配置了項(xiàng)目名稱    projName = StringUtils.isEmpty(projName)?"":projName;    //緩存 文件存儲(chǔ)名、源名稱對應(yīng)關(guān)系、預(yù)覽地址????List>?saveName_orinName_Url?=?new?ArrayList<>();    FileUtil.checkExistDir(savePath);????FileUtil.checkExistDir(pdftemppath);    for(MultipartFile file : files)    {      /*       * 保存上傳文件       */      //文件存儲(chǔ)名      //源文件名      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();      }      /*       * 上傳文件轉(zhuǎn)換pdf，存儲(chǔ)至 ${web.upload-path}       */??????String?pdfSaveName?=?pdftemppath+preName+".pdf";??????AsposeUtil.trans(savePath+svName,?pdfSaveName);      String httpUrl = request.getScheme() + "://" + request.getServerName()?????????+?":"?+?request.getServerPort()?+projName+"/"+?preName+".pdf";      Map 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);  }}

import?Vue?from?'vue'import?'normalize.css/normalize.css'?//?A?modern?alternative?to?CSS?resetsimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'//?import?locale?from?'element-ui/lib/locale/lang/en'?//?lang?i18nimport?'@/styles/index.scss'?//?global?cssimport App from './App'import store from './store'import router from './router'
import '@/icons' // iconimport?'@/permission'?//?permission?control/** * If you don't want to use mock-server * you want to use MockJs for mock api * you can execute: mockXHR() * * Currently MockJs will be used in the production environment, * please remove it before going online ! ! ! */if (process.env.NODE_ENV === 'production') {  const { mockXHR } = require('../mock')  mockXHR()}// set ElementUI lang to ENVue.use(ElementUI)// 如果想要中文版 element-ui，按如下方式聲明//?Vue.use(ElementUI)Vue.config.productionTip?=?falsenew Vue({  el: '#app',  router,  store,  render: h => h(App)})

<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/pdfdiv>????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')      // if (file.raw.type === 'application/pdf') {      //   this.pdfUrl = file.response.data[0].url      //   this.dialogVisible = true      //   return      // }      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>