为什么使用Vue-Simple-Uploader
最近用到了Vue + Spring Boot来完成文件上传的操作,踩了一些坑,对比了一些Vue的组件,发现了一个很好用的组件——Vue-Simple-Uploader,先附上gayhub的
,再说说为什么选用这个组件,对比vue-ant-design和element-ui的上传组件,它能做到更多的事情,比如:
- 可暂停、继续上传
- 上传队列管理,支持最大并发上传
- 分块上传
- 支持进度、预估剩余时间、出错自动重试、重传等操作
- 支持“快传”,通过文件判断服务端是否已存在从而实现“快传”
由于需求中需要用到断点续传,所以选用了这个组件,下面我会从最基础的上传开始说起:
单文件上传、多文件上传、文件夹上传
Vue代码:
<uploader
:options="uploadOptions1"
:autoStart="true"
class="uploader-app"
>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<uploader-btn style="margin-right:20px;" :attrs="attrs">选择文件</uploader-btn>
<uploader-btn :attrs="attrs" directory>选择文件夹</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
该组件默认支持多文件上传,这里我们从官方demo中粘贴过来这段代码,然后在uploadOption1
中配置上传的路径即可,其中uploader-btn 中设置directory属性即可选择文件夹进行上传。
uploadOption1:
uploadOptions1: {
target: "//localhost:18080/api/upload/single",//上传的接口
testChunks: false, //是否开启服务器分片校验
fileParameterName: "file",//默认的文件参数名
headers: {
},
query() {
},
categaryMap: {
//用于限制上传的类型
image: ["gif", "jpg", "jpeg", "png", "bmp"]
}
}
在后台的接口的编写,我们为了方便,定义了一个chunk类用于接收组件默认传输的一些后面方便分块断点续传的参数:
Chunk类
@Data
public class Chunk implements Serializable {
private static final long serialVersionUID = 7073871700302406420L;
private Long id;
/**
* 当前文件块,从1开始
*/
private Integer chunkNumber;
/**
* 分块大小
*/
private Long chunkSize;
/**
* 当前分块大小
*/
private Long currentChunkSize;
/**
* 总大小
*/
private Long totalSize;
/**
* 文件标识
*/
private String identifier;
/**
* 文件名
*/
private String filename;
/**
* 相对路径
*/
private String relativePath;
/**
* 总块数
*/
private Integer totalChunks;
/**
* 文件类型
*/
private String type;
/**
* 要上传的文件
*/
private MultipartFile file;
}
在编写接口的时候,我们直接使用这个类作为参数去接收vue-simple-uploader传来的参数即可,注意这里要使用POST来接收哟~
接口方法:
@PostMapping("single")
public void singleUpload(Chunk chunk) {
// 获取传来的文件
MultipartFile file = chunk.getFile();
// 获取文件名
String filename = chunk.getFilename();
try {
// 获取文件的内容
byte[] bytes = file.getBytes();
// SINGLE_UPLOADER是我定义的一个路径常量,这里的意思是,如果不存在该目录,则去创建
if (!Files.isWritable(Paths.get(SINGLE_FOLDER))) {
Files.createDirectories(Paths.get(SINGLE_FOLDER));
}
// 获取上传文件的路径
Path path = Paths.get(SINGLE_FOLDER,filename);
// 将字节写入该文件
Files.write(path, bytes);
} catch (IOException e) {
e.printStackTrace();
}
}
这里需要注意一点,如果文件过大的话,Spring Boot后台会报错
org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExcee