Springboot+Vue实现批量文件上传(pdf、word、excel)并支持在线预览功能
点击上方 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: 该类的功能描述
*
*/
public class UploadParsePdfCtrler
{
//源文件存储位置
private String savePath;
//生成pdf缓存位置
private String pdftemppath;
//项目访问名称
private String projName;
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
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 resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '@/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import '@/icons' // icon
import '@/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 EN
Vue.use(ElementUI)
// 如果想要中文版 element-ui,按如下方式声明
// Vue.use(ElementUI)
Vue.config.productionTip = false
new 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前后端分离实现用户登陆注册功能
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实现信息修改功能
10、springboot+jpa+thymeleaf实现信息增删改查功能
12、Springboot+layui前后端分离实现word转pdf功能
13、用java将本地图片转base64格式, 再转图片!你用过这个功能?
14、springboot+layui+thymelefe实现用户批量添加功能
15、springboot+Tymeleaf实现用户密码MD5加盐解密登录
16、springboot+vue实现用户注册后必须通过邮箱激活才能登录激活才能登录
19、springboot+vue实现不同管理权限的用户登陆展示的菜单栏目不同功能
20、Springboot+vue实现上传视频并在线播放功能
21、SpringBoot+Vue前后端分离实现邮件定时发送功能
23、Springboot+Vue前后端分离实现Excle文件导入并在前端页面回显功能
24、Springboot+Vue实现从数据库中获取数据生成树状图在前端页面展示功能
25、Springboot+Vue实现从数据库中获取数据生成饼状图并在前端页面展示功能
为了方便大家更好的学习,本公众号经常分享一些完整的单个功能案例代码给大家去练习,如果本公众号没有你要学习的功能案例,你可以联系小编(微信:xxf960513)提供你的小需求给我,我安排我们这边的开发团队免费帮你完成你的案例。
注意:只能提单个功能的需求不能要求功能太多,比如要求用什么技术,有几个页面,页面要求怎么样?