前端上传文件或者上传文件夹

最新推荐文章于 2024-05-29 18:21:12 发布
最新推荐文章于 2024-05-29 18:21:12 发布
阅读量374 收藏 6
点赞数 5
文章标签： js大文件上传 js断点续传 js上传文件夹 js文件夹上传 js上传大文件 js分片上传 js加密上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alisky119/article/details/137339669
版权
本文讨论了如何在前端使用HTML5、VUE2/3、JQ配合后端JAVA/JSP/SpringBoot实现大文件上传和文件夹结构的断点续传功能，同时考虑到了浏览器兼容性（包括IE）和信创国产化环境（如银河麒麟）。文章提供了up6组件的使用示例以及数据库兼容性信息，强调了7*24小时技术支持和文档资源的需求。
摘要由CSDN通过智能技术生成

前端上传文件支持断点续传，前端上传文件夹支持断点续传。用HTML5，前端用了VUE2,VUE3,JQ，后端用了JAVA,JSP,SpringBoot，要求在前端提供大文件上传的功能，文件大小约为20G左右，可能偶尔有文件会超过这个大小，但是不多，

前端上传文件夹需要保留层级结构，文件夹层级结构信息保存到数据库

前端下载文件夹时同样需要保留层级结构。

网上搜了一圈，基本上都是用的HTML5实现的，也就是chrome提供的API，小文件还好，比如几十MB，500MB左右的话，单个文件上传还凑合，但是文件大点，文件一多就不行了。比如1G以上，或者10G以上，100个文件，1000个文件同时传，就有点不行了，主要就是页面反应慢，卡顿。

浏览器要求支持包含IE在内的所有浏览器，系统环境要求支持信创国产化，比如银河麒麟，统信，龙芯，

客户那边是政府单位，所以要求提供技术支持服务，数据库用了MySQL，达梦，要求提供前端，后端，控件源代码，需要提供手机，QQ，微信，邮箱等联系方式，需要提供7*24小时技术支持服务，需要提供文档教程，视频教程，远程技术指导。

1.下载示例

https://gitee.com/xproer/up6-vue-cli

 

 

将up6组件复制到项目中

示例中已经包含此目录

 

 

1.引入up6组件

 

 

2.配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表

参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

 

 

3.处理事件

 

 

启动测试

 

 

启动成功

 

 

效果

 

 

数据库

 

全武凌(荆门泽优)
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端文件上传
VIP__ID的博客
06-24 3422
一丶前端文件上传方式 前端网页文件上传一般使用 来实现。 在 HTML 文档中： <input type="file" />标签每出现一次，一个 FileUpload 对象就会被创建。该标签包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件,该标签的 value属性保存了用户指定的文件的名称。 多选： 标签可以通过添加 multiple 属性来...
前端实现上传文件
xu568110526的博客
04-23 486
【代码】前端实现上传文件。
【技术分享】前端选择文件夹并进行上传
最新发布
m0_47546372的博客
05-29 205
【代码】【技术分享】前端选择文件夹并进行上传。
Vue上传文件夹的实现
weixin_45525177的博客
12-20 968
参考文章：http://blog.ncmem.com/wordpress/2023/12/20/vue%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%a4%b9%e7%9a%84%e5%ae%9e%e7%8e%b0/在这段代码中，我们使用了 input 标签，并且设置了 webkitdirectory 和 directory 属性，表示可以选择文件夹。在上传文件时，我们需要把文件存储到 formData 对象中，并且给每个文件设置一个 name 和一个 type。
前端文件夹上传解决方案
alisky119的博客
04-07 339
前端文件夹上传解决方案，前端文件夹上传解决解决方案，HTML5文件夹上传解决方案，webuploader文件夹上传解决方案，vue文件夹上传解决方案，javascript文件夹上传解决方案，js文件夹上传解决方案，网页文件夹上传解决方案，前端文件夹上传下载解决方案，php文件夹上传解决方案，java文件夹上传解决方案，前端jsp文件夹上传解决方案，前端c#文件夹上传解决方案，前端.net文件夹上传解决方案，参考：http://www.ncmem.com/doc/view.aspx?示例中已经包含此目录。
前端如何直接上传文件夹
xinTianou123的博客
10-22 1614
我们经常看到一些网站支持直接选择整个文件夹上传，例如：宝塔面板、cloudflare托管、对象存储网站等等需要模拟文件路径存储文件的场景。那是怎么实现的呢？
前端上传文件夹或文件至后端（SpringBoot）
weixin_48581386的博客
03-20 4509
前端上传文件夹给后端
前端如何真正实现上传整个文件夹，而不是简单地展开成多文件？
qq_49700358的博客
05-09 6741
通过建立模拟实际文件系统的树型数据结构，配合开源npm库，实现了文件夹的一体化上传，层序上传，而不是简单使用API进行将文件夹拆分成多文件上传。
ko.tar.gz_文件上传前端
09-24
对于"在Linux下开发人士的参考"，这可能意味着该项目包含了与Linux服务器相关的配置或脚本，例如使用Node.js作为后端服务，处理前端上传的文件，或者使用Nginx等HTTP服务器进行反向代理和静态文件服务。开发者可能...
SSH 上传文件及文件夹到linux服务器的方法
01-10
现在服务器linux很多。是不是不会传文件？...同文件上传只是在文件名字前面加上-r 例子： scp static/ root@58.87.124.110:/home/service-tomcat/webapps/ 需要注意： 　1、要在要上传文件的前面加-r，否则
jsp 大文件/文件夹上传控件
12-08
大文件/文件夹上传控件就是这样的一个组件，它集成了前端和后端的技术，实现了文件上传功能。 1. **前端技术**：在前端，通常会使用HTML5的新特性，如`<input type="file">`标签的`multiple`属性来支持多选文件，...
Java上传文件到服务器指定文件夹实现过程图解
08-18
文件上传完成后，服务端会扫描该文件夹，整合所有分片为一个完整的文件。 **4. 分块处理逻辑：** 服务端接收到分块后，可以将它们保存到分布式存储系统中。每个分块的数据包括其在原始文件中的位置信息，这使得...
web前端文件上传可选择的4种方式
热门推荐
jimojianghu的专栏
11-23 1万+
本文总结了前端web当前能够添加读取文件的4种方式，如果我们需要开发一个比较完善的图片上传组件，那么可能需要点击、拖拽、粘贴多种功能，这就需要使用到前三种文件读取方式。文件系统访问API鉴于兼容性还有待提升，我们可以作为后备的方案使用。有了文件读取的方式，那我们要完成上传功能，就可以使用HTML表单提交，或者FormData对象上传了。
前端上传文件的操作
qq_49793461的博客
07-30 1321
前端上传文件到后端的基本格式
前端上传文件夹及其所有子文件夹和文件
夜空孤狼啸的博客
12-29 1215
思路：用fs.readdir得到当前文件夹的所有子文件和子文件夹，再用fs.stat里面的 isFile()和isDirectory() 去判断文件还是文件夹，注意是方法，然后去做相应的操作。上传文件夹，下面是主要代码，直接复制是不能用的。
js将前端上传的文件保存到指定的文件夹
06-02
JavaScript 本身是不能将文件保存到指定的文件夹中的，这是由于浏览器的安全机制所限制的。如果 JavaScript 能够随意地在用户的计算机上创建和操作文件，那么就会带来很大的安全风险。 不过，你可以使用一些技术来实现类似的功能。例如，可以使用服务器端的脚本语言（如 PHP、Node.js 等）来接收前端上传的文件，并将其保存到指定的文件夹中。具体的实现方式，可以参考以下步骤： 1. 在前端页面中，使用 `input` 元素的 `type="file"` 属性创建一个文件上传框，让用户选择要上传的文件。 ```html <input type="file" id="fileInput"> ``` 2. 使用 JavaScript 获取上传框中选择的文件，并将其发送到服务器端。 ```javascript var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0]; var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); var formData = new FormData(); formData.append('file', file); xhr.send(formData); ``` 3. 在服务器端接收上传的文件，并将其保存到指定的文件夹中。 以 Node.js 为例，可以使用 `fs` 模块中的 `createWriteStream` 方法来创建一个可写流，将上传的文件写入到指定的文件夹中。 ```javascript const fs = require('fs'); const path = require('path'); const express = require('express'); const app = express(); app.post('/upload', (req, res) => { const file = req.files.file; const filePath = path.join(__dirname, 'uploads', file.name); const writeStream = fs.createWriteStream(filePath); file.pipe(writeStream); writeStream.on('finish', () => { res.send('上传成功！'); }); }); app.listen(3000, () => { console.log('服务器启动成功！'); }); ``` 在这个例子中，我们将上传的文件保存到了 `uploads` 文件夹中。当文件上传完成后，服务器会返回一个成功的响应。需要注意的是，这里使用了 `pipe` 方法将文件的可读流和可写流连接起来，实现了文件的写入操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值