前端使用 vue-simple-upload
后端使用 springboot
安装 npm install vue-simple-uploader --save
<template>
<div class="hello">
<h3>Installed CLI Plugins</h3>
<uploader :options="options" class="uploader-example" @file-added="onFileAdded" @file-success="onFileSuccess" @file-error="onFileError">
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<!-- <p>Drop files here to upload or</p> -->
<uploader-btn>select files</uploader-btn>
<!-- <uploader-btn :attrs="attrs">select images</uploader-btn> -->
<!-- <uploader-btn :directory="true">select folder</uploader-btn> -->
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
options: {
target: "http://localhost:11001/upload/bigfile",
testChunks: false,
//上传文件时候,文件的参数名,默认为 file
fileParameterName: "file",
//其他参数,可以是一个对象的形式
query: {},
//上传方式,默认为 multipart
method: "multipart",
//http方法,默认为post
uploadMethod: "post",
//分片大小 单位 bytes ,下面 2M 1024bytes = 1KB, 1024 * 1024 bytes = 1MB
chunkSize: 1 * 1024 * 1024 * 2,
},
attrs: {
accept: "image/*",
},
};
},
methods: {
onFileAdded() {
console.log("onFileAdded");
let s = 111;
s.toFixed();
},
onFileSuccess() {
console.log("onFileSuccess");
},
onFileError() {
console.log("onFileError");
},
},
};
</script>
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
package com.tiger.springbootmongodb.controller;
import com.tiger.springbootmongodb.pojo.Chunk;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartResolver;
import JAVAx.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.RandomaccessFile;
import java.util.Iterator;
@RestController
@RequestMApping("upload")
public class BigFileUploadController {
@Autowired
MultipartResolver multipartResolver;
@PostMapping("bigfile")
public String bigFileUpload(@RequestParam(value = "file", required = false) MultipartFile multipartFile, @ModelAttribute Chunk chunk, HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println("第 " + chunk.getChunkNumber() + " 片文件,文件大小:" + chunk.getCurrentChunkSize());
File file= new File("D:\1-program\" + chunk.getFilename());
if(chunk.getChunkNumber() == 1 && !file.exists()){
file.createNewFile();
}
try(
//将块文件写入文件中
InputStream fos=chunk.getFile().getInputStream();
RandomAccessFile raf =new RandomAccessFile(file,"rw")
){
int len=-1;
byte[] buffer=new byte[1024];
raf.seek((chunk.getChunkNumber()-1)*1024*1024*2);
while((len=fos.read(buffer))!=-1){
raf.write(buffer,0,len);
}
}catch (Exception e){
e.printStackTrace();
}
if(chunk.getChunkNumber().equals(chunk.getTotalChunks())){
response.setStatus(200);
// TODO 向数据库中保存上传信息
return "over";
}else {
response.setStatus(201);
return "ok";
}
}
}