Springboot+Vue实现批量文件上传(pdf、word、excel)并支持在线预览功能

Java引导者

共 6359字,需浏览 13分钟

 ·

2020-09-01 11:16

点击上方 web项目开发选择 设为星标

优质文章,及时送达





效果图

前端初始页面


上传doc,docx,xls,xlsx,ppt,pptx,txt成功页面

文件在线预览页面





环境介绍

JDK:1.8

数据库:Mysql5.6

前端:Vue

后端:SpringBoot





完整源码获取



扫码关注回复括号内文字【办公软件】获取源码


如果你在运行这个代码的过程中有遇到问题,请加小编微信xxf960513,我拉你进对应微信学习群!!帮助你快速掌握这个功能代码!





核心代码介绍

pox.xml

<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>

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;/**    * Copyright @ 2020 Zonlyn. All rights reserved.
* @Description: 该类的功能描述**/@RestController@RequestMapping("/filetopaf")@CrossOrigin@Api(value="文件上传转pdf预览",tags={"文件上传转pdf预览"})public class UploadParsePdfCtrler { //源文件存储位置 @Value("${web.oring-save-path}") private String savePath; //生成pdf缓存位置 @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> 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(); } /* * 上传文件转换pdf,存储至 ${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); }}

main.js

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)})

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/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>

--完--


如果你觉得这个案例以及我们的分享思路不错,对你有帮助,请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦!


推荐案例

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)提供你的小需求给我,我安排我们这边的开发团队免费帮你完成你的案例。
注意:只能提单个功能的需求不能要求功能太多,比如要求用什么技术,有几个页面,页面要求怎么样?

浏览 90
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报