前端上传组件
1. [FE] 用 FormData 上传多个文件到 MultipartFile[] 接口
最近有一个场景，在提交表单的时候，需要实现添加附件的功能，
表单内容要先提交到服务端，创建一个 issue，然后再将附件添加到这个 issue 中。
所以，附件在用户添加的时候，是 没有立即上传 的，
用户可以随意在浏览器端添加和删除，issue 创建后再一起上传。
前端采用的组件库是 antd ，用到了 upload 组件。
服务端接口是自定义实现的，也许并不支持 antd upload 上传组件的规范。
服务端接受数据时，使用了 MultipartFile ，这是 Spring 框架中常用的 写法 。
我们先看看 html input[type=file] 组件默认行为，
点击 “选择文件”，浏览器会弹出一个窗口，
选中一个文件，点 “打开”，就会触发 onchange 事件，
在 onchange 事件中，可以通过 e.target.files[0] 拿到刚才上传的那个 File 对象 。
再来看一下 upload 组件的默认行为，
点击 “添加”，浏览器也会弹出那个选择文件的窗口，
选中一个文件，点 “打开”，发现上传失败了。
打开控制台，看到 upload 组件向 / 这个地址发送了一个 POST 请求，
数据格式如下，
我们可以向 upload 组件传入 action 参数，修改 POST 请求地址，
但是，选中文件后立即上传 不符合 我们的场景，我们需要提交表单之后，将多个文件统一上传。
所以我们得自定义 upload 组件的行为。
upload 组件的有一个 customRequest 属性（ #api ），
它可以配置自定义的上传行为。
我们的思路是，先将选中后自动上传的行为取消掉，然后再在提交表单后统一上传。
取消自动上传 的实现片段如下，
我们只需要在 customRequest 回调中，调用它的 onSuccess 参数即可。
删除也是可以用的，
现在我们添加两个附件，
接着来看前端怎样将这些附件，统一上传给服务端，具体实现如下，
可以看到请求成功了（项目中的 url 跟本例稍有不同，下图只为了示意），
还有几个需要注意的点：
上文 httpClient.post 实际调用了 XMLHttpRequest 发送请求，可能会遇到 跨域 的问题。
所以在调试上传接口的时候，需要检查一下服务端的配置，是否支持跨域请求。
CORS 相关的内容大致如下：
在预检请求阶段，服务端对 OPTIONS 请求的响应头中会包含 Access-Control-Allow-Origin ，
表明服务端接受该域 http://foo.example 的跨域请求。
注：
这里需要后端实现 OPTIONS 方法，后端框架一般会通过配置方式统一处理（返回 200 或 204，不能是 4xx）。
如果未配置统一处理方式，框架可能会直接返回 404 导致预检请求失败，CORS 请求也会失败。
使用 XMLHttpRequest 发送请求时，也可以携带 cookie 信息，
同时 预检请求中服务端响应头，也要包含 Access-Control-Allow-Credentials ，否则就不会发送 cookie
对于附带 cookie 的请求，服务器不能设置 Access-Control-Allow-Origin 的值为 “ * ”，否则请求将会失败。
而将 Access-Control-Allow-Origin 的值设置为具体的地址 http://foo.example ，请求才能成功。
我们上传功能用到了携带 cookie 的跨域请求，
可以看到服务端响应头中确实包含了， Access-Control-Allow-Credentials 和 Access-Control-Allow-Origin 两个字段。
Spring: Uploading Files
Spring: org.springframework.web.multipart #MultipartFile
ant-design v4.11.1
Ant Design - Upload #API
MDN: CORS
2. FileUploader上传文件获取不到文件名的问题
看样子是要前端通过访问Service上传文件。而且还用到了前端上传组件。
前面浏览了一下感觉没什么问题，好像是Service有些问题。你确认你用的这个fileuploader生成的回传表单name叫做qqfile吗？你可以用fiddler或开发人员工具调试看看，确认名字是否用错了。另外你这个写法在Service容易引发未将对象引用设置到对象的实例错误，导致服务器500错误，推荐使用下面的代码。
context.Response.ContentType="text/plain";
//判断文件数量是否大于零
if(context.Request.Files.Count>0)
{
//获取文件对象
HttpPostedFilefile=context.Request.Files[0];
//判断文件路径是否为空
if(!string.IsNullOrEmpty(file.FileName))
{
//文件保存处理Start
//DoSomething
//End
//保存成功，回传前台
context.Response.Write("ok");
}
}
3. VUE 前端大文件上传如何实现
你好，这个自己写起来，虽然也不是很难，但是觉得没有必要写，你可以看些elementUI上传组件。
4. 前端面试,项目文件上传一半失败了 如何处理
前端面试,项目文件上传一半失败了的处理方法如下：
1、首先要确保论坛文件的完整性，不要少传了某个文件，有好多人把upload.inc文件当做文本文件删掉，所以导致无法上传，不能上传表现为上传框那里显示一白条，其实下面有字的，按鼠标左键往下拉可以拉出详细出错原因；
2、选择正确的上传组件，一般服务器都支持无组件上传的，如果你选择了服务器不允许的上传组件，也是不能上传；
3、检查上传目录是否真实存在，如果不存在，你在上传时总是会提示请选择正确的文件，再检查此文件夹是否有Internet来宾用户的写入权，如果只是存在，没有写入权限同样也是显示请选择正确的文件；
4、再检查你上传的文件大小是否超过了允许上传的文件大小，首先检查后台用户组设置中每一用户组允许上传的文件大小，如果设置正确仍然不能上传过大的文件，请与空间商联系，需要在空间上修改；
5. 前端上传图片头像到七牛云格式变成text
流程：七牛云后台的对象存储功能，nodejs后台生成七牛云的token，前端利用elementUI/ice的upload组件，文件名和token作为参数请求到七牛云后台。
配置已经完成，写接口用的是express，koa同理，主要做法是先接收前端的图片流转换成图片写入本地image文件中，然后再存储到七牛云，再将本地生成的图片删除，需要新建一个image文件夹
6. day06项目【整合阿里云OSS和Excel导入分类】
为了解决海量数据存储与弹性扩容，项目中我们采用云存储的解决方案- 阿里云OSS。
1、开通“对象存储OSS”服务
（1）申请阿里云账号
（2）实名认证
（3）开通“对象存储OSS”服务
（4）进入管理控制台
2、创建Bucket
选择：标准存储、公共读、不开通
3、上传默认头像
创建文件夹avatar，上传默认的用户头像
1、在service模块下创建子模块service-oss
2、配置pom.xml
service-oss上级模块service已经引入service的公共依赖，所以service-oss模块只需引入阿里云oss相关依赖即可，
service父模块已经引入了service-base模块，所以Swagger相关默认已经引入
3、配置application.properties
4、logback-spring.xml
5、创建启动类
创建OssApplication.java
6、启动项目
报错 ：
spring boot 会默认加载org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration这个类，
而DataSourceAutoConfiguration类使用了@Configuration注解向spring注入了dataSource bean，又因为项目（oss模块）中并没有关于dataSource相关的配置信息，所以当spring创建dataSource bean时因缺少相关的信息就会报错。
即可成功：
1、从配置文件读取常量
创建常量读取工具类：ConstantPropertiesUtil.java
使用@Value读取application.properties里的配置内容
用spring的 InitializingBean 的 afterPropertiesSet 来初始化配置信息，这个方法将在所有的属性被初始化后调用。
2、文件上传
创建Service接口：uploadFileAvatar.java
实现：OssServiceImpl.java
参考SDK中的：Java->上传文件->简单上传->流式上传->上传文件流
3、控制层
创建controller：FileUploadController.java
4、重启oss服务
5、Swagger中测试文件上传
解决上传文件覆盖问题：
测试：
6、配置nginx反向代理
配置nginx实现请求转发的功能：
验证：
1、复制头像上传组件
从vue-element-admin复制组件：
vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb
2、前端参考实现
src/views/components-demo/avatarUpload.vue
3、前端添加文件上传组件
src/views/e/teacher/save.vue
template：
引入组件模块：
4、设置默认头像（也可不设置）
onfig/dev.env.js中添加阿里云oss bucket地址
组件中初始化头像默认地址
5、js脚本实现上传和图片回显
二、测试文件上传
前后端联调
1、数据导入：减轻录入工作量
2、数据导出：统计信息归档
3、数据传输：异构系统之间数据传输
1、EasyExcel特点
Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行，但是一旦并发上来后一定会OOM或者JVM频繁的full gc。
EasyExcel是阿里巴巴开源的一个excel处理框架， 以使用简单、节省内存着称 。EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中，而是从磁盘上一行行读取数据，逐个解析。
EasyExcel采用一行一行的解析模式，并将一行的解析结果以观察者的模式通知处理（AnalysisEventListener）。
1、创建一个普通的maven项目
项目名：excel-easydemo
2、pom中引入xml相关依赖
3、创建实体类
设置表头和添加的数据字段
4 、实现写操作
TestEasyExcel.java
（1）创建方法循环设置要添加到Excel的数据
（2）实现最终的添加操作（写法一）
（3）实现最终的添加操作（写法二）
public static void main(String[] args) throws Exception {
// 写法2，方法二需要手动关闭流
//实现excel写的操作
//1 设置写入文件夹地址和excel文件名称
String filename = "F:\write.xlsx";
ExcelWriter excelWriter=EasyExcel.write(fileName,DemoData.class).build();
WriteSheet writeSheet=EasyExcel.writerSheet("写入方法二").build();
excelWriter.write(data(),writeSheet);
/// 千万别忘记finish 会帮忙关闭流
excelWriter.finish();
}
1、创建实体类
2、创建读取操作的监听器
3、调用实现最终的读取
public class TestEasyExcel {
public static void main(String[] args) {
//实现excel读操作
// 写法1：
String filename = "F:\write.xlsx";
// 这里 需要指定读用哪个class去读，然后读取第一个sheet 文件流会自动关闭
EasyExcel.read(filename,DemoData.class,new ExcelListener()).sheet().doRead();
// 写法2：
InputStream in = new BufferedInputStream(new FileInputStream("F:\01.xlsx"));
ExcelReader excelReader = EasyExcel.read(in, DemoData.class, new ExcelListener()).build();
ReadSheet readSheet = EasyExcel.readSheet(0).build();
excelReader.read(readSheet);
// 这里千万别忘记关闭，读的时候会创建临时文件，到时磁盘会崩的
excelReader.finish();
}
1、编辑Excel模板
2、将文件上传至阿里云OSS
1、添加路由
2、添加vue组件
1、js定义数据
2、template
3、js上传方法
4、回调函数
1、service-e模块配置依赖
1、ESubjectController
2、创建和Excel对应的实体类
3、ESubjectService
（1）接口
（2）实现类
4、创建读取Excel监听器
1、参考 views/tree/index.vue
2、创建api
api/e/subject.js
3、list.vue
1、创建vo
2、创建controller
7. vue前端如何实现文件文件夹系统
文件上传页面的前端可以选择使用一些比较好用的上传组件，例如网络的开源组件WebUploader，泽优软件的up6，这些组件基本能满足文件上传的一些日常所需功能，如异步上传文件，文件夹，拖拽式上传，黏贴上传，上传进度监控，文件缩略图，甚至是大文件断点续传，大文件秒传。
需求：
支持大文件批量上传（20G）和下载，同时需要保证上传期间用户电脑不出现卡死等体验；
内网百兆网络上传速度为12MB/S
服务器内存占用低
支持文件夹上传，文件夹中的文件数量达到1万个以上，且包含层级结构。
支持PC端全平台操作系统，Windows,Linux,Mac
支持文件和文件夹的批量下载，断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。
支持文件夹批量上传下载，服务器端保留文件夹层级结构，服务器端文件夹层级结构与本地相同。
8. SpringBoot超大文件上传如何实现
不管什么技术，超大文件上传（超出一次tcp上限）都是要做分片和合并的，无非是自己做还是找控件的差别。
另外，springboot是后台接收，前端实现是由前端框架负责，比如vue。
以下是Vue+Springboot实现大文件上传的二种方式：
1、利用ElementUI的el-upload
优点：
简单方便，可以实现功能
缺点：
上传速度太慢，没有分片单线程上传1个G的文件即使在局域网也很慢
上传显示的进度条不准确，进度已经100%了，但是还需要等很久在服务端才生成完文
2、利用网络的webuploader
优点：
WebUploader是网上比较推荐的方式，分片上传大文件速度很快。
缺点：
必须依赖 jquery
不能 import 导入，只能在 index.html 里包含。
3. 利用vue-uploader
vue-uploader 是基于vue的uploader组件，缺省就是分片上传。
通过npm安装，基本流程参考github上的说明即可。
上传的基本原理就是前端根据文件大小，按块大小分成很多块，然后多线程同时上传多个块，同时调用服务端的上传接口，服务端会生成很多小块小块的文件。
所有块都上传完之后，前端再调用一个服务端的merge接口，服务端把前面收到的所有块文件按顺序组合成最终的文件。
9. webuploader分片上传的实现代码（前后端分离）
本文介绍了webuploader分片上传的实现代码（前后端分离），分享给大家，具体如下：
WebUploader是由Bai
WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS
6+,
android
4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。(这个是从官网上直接的解释)
功能描述
1、webuploader是网络研发的上传组件，文档不是特别规整，但是也够用了。
2、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。
3、分片上传已做md5校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也可以边分片边合并，本示例采用的是边分片边合并的方案。
4、后端用springboot做框架搭建。springMVC做rest服务，开启跨域访问。
5、容器用springboot内置的tomcat插件，运行Application的main方法即可启动服务；
显示效果
关键代码前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，则跳过上传
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
实例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'点击选择文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的区域
paste:
'#uploader',
//指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上传的个数
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制单个文件的大小
50
M
});
后端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上传之前校验(整个文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校验
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳过",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校验
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳过",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
没有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
当前片
Long
chunks
=
uploadVO.getChunks();//
总共多少片
//
分片目录创建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上传
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上传出错",
e);
return
RETURN.fail("分片上传出错",
1);
}
//
合并分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合并失败：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合并失败",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
删除分片文件夹
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上传成功",
1);
}
else
{
return
RETURN.fail("上传中...",
1);
}
}
/**
*
未分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上传
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上传目录
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上传成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上传出错",
e);
return
RETURN.fail("文件上传出错",
0);
}
}
return
RETURN.fail("上传失败",
0);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue2.0结合webuploader实现文件分片上传功能使用WebUploader实现分片断点上传文件功能（二）webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码jQuery
webuploader分片上传大文件
10. 前端plupload上传组件，上传前怎么获取本地文件路径
这个控件取不到，所有的基于Flash的控件都取不到，所有的基于HTML5的控件同样取不到，所以你不用试了。只能找基于ActiveX的控件，ff,chr上面就找基于NPAPI的控件。