开发实例：后端JAVA和前端VUE实现文件上传和下载功能

最新推荐文章于 2024-04-29 10:40:41 发布
最新推荐文章于 2024-04-29 10:40:41 发布
阅读量399 收藏 10
点赞数 3
文章标签： 前端 java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alisky119/article/details/137866185
版权

开发实例：后端JAVA和前端VUE实现文件上传和下载功能，java大文件上传,jsp大文件上传，SpringBoot大文件上传，JAVA实现大文件上传插件

客户是一个政府单位，现要求能够在网页上面上传文件夹，文件夹里面大约有1万多个文件，有大有小，大的有1G~10G，小的有几MB，

下载这块是一个痛点吧，

大领导这边要求的话是需要提供前端，后端，控件源代码的，主要的一个方面就是考虑到后期的维护

前端用了JSP，VUE2,VUE3，后端用了JSP,SpringBoot，IDE用了Eclipse,MyEclipse，因为新项目和老项目都用了两种IDE。

文件夹上传的时候需要保存层级结构，同时能够将层级结构信息保存到数据库中，同时还需要支持文件夹下载，下载下来的文件夹要和上传的文件夹层级结构一模一样。要求支持断点续传，支持进度信息离线存储，用户可能传一半没有传完，下班了，明天上班后继续上传，电脑晚上到点需要关机，

支持加密传输，支持国密加密算法SM4，要求支持下载，支持非打包方式下载，

浏览器要求支持包含IE在内的所有浏览器，

系统环境要求支持信创国产化，比如银河麒麟，中标麒麟，统信UOS，龙芯，

数据库支持MySQL,Oracle,达梦数据库,人大金仓，需要提供前端源码，后端源码，控件源码，公司自己的项目，也有自己的产品，后续需要集成使用，提供7*24小时技术支持服务，提供文档教程，视频教程，远程技术指导，1对1技术支持服务，提供手机，微信，QQ，邮箱，企业微信等联系方式。

导入项目：
导入到Eclipse：导入项目
导入到IDEA：导入项目
springboot统一配置：springboot-配置

下载示例：

https://gitee.com/xproer/up6-jsp-eclipse/tree/6.5.40/

工程

NOSQL

NOSQL示例不需要任何配置，可以直接访问测试

创建数据表

选择对应的数据表脚本，这里以SQL为例

修改数据库连接信息

访问页面进行测试

文件存储路径

up6/upload/年/月/日/guid/filename

相关问题：
1.javax.servlet.http.HttpServlet错误
2.项目无法发布到tomcat
3.md5计算完毕后卡住
4.服务器找不到config.json文件

相关参考：

文件保存位置

源码工程文档：泽优上传下载-源码版-工程文档.pdf

源码报价单：泽优上传下载-源码版-2024.pdf

OEM版报价单：泽优上传下载-OEM版-2024.pdf

控件源码下载：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

全武凌(荆门泽优)
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java版商城源码下载-mall:小程序商城前端+后端
06-05
java版商城源码下载 litemall 又一个小商场系统。 litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端 项目实例 小商场实例 renard-wx模块实例 注意：此实例是真实小商场，开发者...
开发实例：后端Java和前端vue实现文件上传和下载功能
weixin_45525177的博客
10-26 278
在这个例子中，我们只需要在按钮的click事件中调用window.open()方法，并将要下载的文件名拼接到URL中即可。在这个例子中，我们只需要监听文件选择框的change事件，获取用户选择的文件，并使用FormData对象创建一个包含文件的表单数据。在vue前端代码中，我们可以使用axios发送POST请求来上传文件，使用window.open()方法来实现文件下载。在这个例子中，我们首先检查上传的文件是否为空，如果不为空，就读取文件的字节数据，并使用Files.write()方法将其写入指定的路径。
前端 vue + vant - 后端 java - 阿里云OSS存储 实现文件上传
m0_73478445的博客
01-02 1128
通过阿里云OSS完成文件上传
前端vue后端java,Vue调用后端java接口的实例代码_亦心_前端开发者
weixin_28712491的博客
03-13 1238
前段时间 做了个学校的春萌项目，其中用到先上后端接口代码：package controller;import net.sf.json.JSONObject;import util.DBUtil;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.h...
前端（vue3 + ant design）和 后端 python flask 实现文件上传
m0_48162505的博客
06-21 2041
前端（vue3 + ant design ）和 后端 python flask 实现文件上传 a-upload
java版商城源码下载-litemall-:SpringBoot后端+Vue管理员前端+微信小程序用户前端+Vue用户移动端
06-05
java版商城源码下载 litemall 又一个小商场系统。 litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端 项目实例 小商场实例 renard-wx模块实例 注意：此实例是真实小商场，开发者...
java版商城源码下载-litemall:litemall=SpringBoot后端+Vue管理员前端+微信小程序用户前端+Vu
04-24
java版商城源码下载 litemall 又一个小商场系统。 litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端 项目实例 小商场实例 renard-wx模块实例 注意：此实例是真实小商场，开发者...
java版商城源码下载-HoDuanGanLi:后端管理系统
06-05
java版商城源码下载 litemall 又一个小商场系统。 litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端 项目实例 小商场实例 renard-wx模块实例 注意：此实例是真实小商场，开发者...
java开发crm项目源码-OnlineStoreAndPaimai:在线商城和拍卖。本系统商城端用Uniapp开发，后端UI部分基于VUE+
06-05
本系统商城端用Uniapp开发，后端UI部分基于VUE+Element，业务后台采用Java。电商部分非常成熟， 经受了1小时内4000单以上的实战考验。拍卖部分是根据某用户的需求进行定制开发。还有文博馆部分，通过分享机制，实现...
SpringBoot项目打包分离高阶操作
Record Little
04-23 732
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 204
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 479
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
前端调用WebSocket协议接口获取数据
最新发布
m0_56023096的博客
04-29 157
createWs("测试数据", (res) => {
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 921
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 154
两个前端标签
前端实现将二进制文件流，并下载为excel文件
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-23 670
介绍了前端如何实现将二进制文件流解析并下载为excel文件，以及解决容易遇到的问题。
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 385
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 311
vue报错：Do not mutate vuex store state outside mutation handlers.
通过vue、java写一个前端向后端传递参数的例子
07-08
下面是一个使用Vue.js和Java编写的前端向后端传递参数的例子： 前端代码（使用Vue.js）： ```html <!DOCTYPE html> <html> <head> <title>Vue Example</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { name: '', age: '', response: '' }, methods: { sendData() { axios.post('backend.php', { name: this.name, age: this.age }) .then(response => { this.response = response.data; }) .catch(error => { console.error(error); }); } } }); </script> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="Name"> <input type="text" v-model="age" placeholder="Age"> <button @click="sendData">Send Data</button> <div>{{ response }}</div> </div> </body> </html> ``` 后端代码（Java，使用Spring Boot）： ```java import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; @SpringBootApplication @RestController public class BackendApplication { public static void main(String[] args) { SpringApplication.run(BackendApplication.class, args); } @PostMapping("/backend.php") public String processData(@RequestBody RequestData requestData) { String name = requestData.getName(); int age = requestData.getAge(); // 处理数据，这里只是简单地将数据拼接成字符串作为响应返回 String response = "Name: " + name + ", Age: " + age; return response; } public static class RequestData { private String name; private int age; // 添加默认构造函数和getter/setter方法 public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } } } ``` 在这个例子中，我们使用Vue.js在前端创建了一个简单的表单，包含了一个文本输入框用于输入姓名和年龄，并有一个按钮用于发送数据。我们使用`v-model`指令将输入框的值绑定到Vue实例的`name`和`age`属性上。 在Vue实例的`sendData`方法中，我们使用Axios库发送POST请求到后端的`/backend.php`接口，并将`name`和`age`作为请求体发送。在成功响应后，我们将后端返回的响应数据赋值给Vue实例的`response`属性，用于显示在页面上。 后端使用Spring Boot框架编写了一个简单的Java应用程序。我们创建了一个RESTful接口`/backend.php`，通过`@PostMapping`注解来处理POST请求。请求体中的数据会自动映射到`RequestData`类中的属性。在处理数据时，我们将姓名和年龄拼接成字符串作为响应返回。 请注意，需要安装Vue.js和Axios库，以及配置好Java开发环境和Spring Boot依赖。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值