大家阅读前请最好阅读一下官方文档,了解一下各个参数的作用。
好了,话不多说,上码!
一、前端
1.安装:npm install vue-simple-uploader --save
2.使用:在main.js中
3.创建一个上传页面,我这里假定为uploadFile.vue了
<template>
<div>
<interviewBack />
<div>
<uploader
:options="options"
:file-status-text="statusText"
class="uploader-example"
ref="uploader"
@file-success="fileSuccess"
style="width: 100%;"
>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>欢迎来到上传录音界面</p>
<uploader-btn>选择录音</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</div>
</div>
</template>
<script>
import interviewBack from '@/views/interview/interviewBack'
export default {
data() {
return {
recording: {},
options: {
// https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
target: "http://10.31.37.2:8080/upload/upload",
testChunks: false, //不校验
chunkSize: '10240000'
},
statusText: {
success: "上传成功",
error: "上传失败",
uploading: "上传中",
paused: "暂停中",
waiting: "等待中"
}
};
},
components:{
interviewBack
},
methods: {
//上传成功的事件
fileSuccess(rootFile, file, message, chunk) {
console.log(message);
//将面试邀请code和文件路径去保存到数据库中
var href = location.href;
var split = href.split("?");
var invCode = split[1];
this.recording.invCode = invCode;
this.recording.recordingUrl = message;
// this.$ajax
// .post(
// "http://localhost:8080/interview/recording/saveFileData",
// JSON.stringify(this.recording),
// {
// headers: {
// "Content-Type": "application/json;charset=UTF-8"
// }
// }
// )
// .then(response => {
// if ("ok" == response.data) {
// console.log("上传成功");
// } else {
// alert("上传失败");
// }
// })
// .catch(function(error) {
// alert("上传失败");
// console.log(error);
// });
}
},
mounted() {
// 获取uploader对象
this.$nextTick(() => {
window.uploader = this.$refs.uploader.uploader;
});
}
};
</script>
<style>
.uploader-example {
width: 100%;
padding: 15px;
margin: 50px auto 0;
font-size: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
margin-right: 4px;
}
.uploader-example .uploader-list {
max-height: 440px;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
</style>
二、后端
1.控制层controller
package org.btz.ic.controller;
import java.io.PrintWriter;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.btz.ic.serviceImpl.UploadService;
import org.btz.ic.utils.UploadUtils;
import org.btz.ic.utils.Uploader;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
/**
*
* @author haoze
*
*/
@CrossOrigin
@Controller
@RequestMapping("/upload")
public class UoloadController {
@Resource
private UploadService uploadService;
@ResponseBody
@RequestMapping(path = "/upload2", method = RequestMethod.POST)
public void upload(HttpServletRequest request, HttpServletResponse response){
new UploadUtils().upload(request);
this.success(response, "上传成功!");
}
public void success(HttpServletResponse response, Object obj){
PrintWriter writer = null;
try {
writer = response.getWriter();
writer.write(obj.toString());
} catch(Exception e){} finally{
if( writer != null ){
//writer.close();
}
}
}
/**
* 分片上传
* @param request 前台发送过来的文件内容
* @param response 响应给前台文件路径
* @throws Exception
*/
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public void upload2(HttpServletRequest request, HttpServletResponse response) throws Exception{
final String[] filepath = {""};
final String[] or_filename = {""};
try{
uploadService.post(request, new Uploader.UploadListener() {
@Override
public void callback(String status, String filename, String original_filename, String identifier, String fileType) {
if(status != null){
System.out.println(filename);
}
filepath[0] =filename;//文件上传的路径带走
or_filename[0] =original_filename;//源文件名称带走
}
});
}catch(Exception e){
e.printStackTrace();
}
//这句话的意思,是让浏览器用utf8来解析返回的数据
response.setHeader("Content-type", "text/html;charset=UTF-8");
//这句话的意思,是告诉servlet用UTF-8转码,而不是用默认的ISO8859
response.setCharacterEncoding("UTF-8");
response.getWriter().append(filepath[0]+"---"+ or_filename[0]);
}
// @RequestMapping("/saveFileData")
// public String saveFileData(@RequestBody Recording recording){
// try {
// recordingService.saveFileData(recording);
// return "ok";
// } catch (Exception e) {
// return "no";
// }
// }
}
2.service 类 代码内路径为存储上传文件的地址
package org.btz.ic.serviceImpl;
import org.btz.ic.utils.Uploader;
import org.springframework.stereotype.Service;
@Service
public class UploadService extends Uploader{
public UploadService(){
super("F:/tmp/","file");
}
}
3.上一个工具类吧哈哈哈
package org.btz.ic.utils;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
public class UploadUtils {
public String upload(HttpServletRequest request) {
String path = "F:/tmp/";
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
if (multipartResolver.isMultipart(request)) {
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 一次遍历所有文件
MultipartFile file = multiRequest.getFile(iter.next().toString());
if (file != null) {
String p = path + "/" + file.getOriginalFilename();
// 上传
try {
file.transferTo(new File(p));
return p;
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
return null;
}
}
package org.btz.ic.utils;//Uploader.java
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.Iterator;
//https://github.com/simple-uploader/Uploader/blob/develop/samples/Node.js/uploader-node.js
/**
* 断点续传
*
* @author jwj
*
*/
public class Uploader {
/**
* 临时文件夹
*/
private String temporaryFolder;
/**
* 最大文件大小
*/
private Integer maxFileSize = 524288000;
// private String fileParameterName;
public Uploader(String temporaryFolder, String fileParameterName) {
this.temporaryFolder = temporaryFolder;
File file = new File(temporaryFolder);
if (!file.exists()) {
file.mkdirs();
}
// if (fileParameterName == null) {
// this.fileParameterName = "file";
// } else {
// this.fileParameterName = fileParameterName;
// }
}
public String cleanIdentifier(String identifier) {
return identifier.replaceAll("[^0-9A-Za-z_-]", "");
}
public String getChunkFilename(int chunkNumber, String identifier) {
identifier = cleanIdentifier(identifier);
return new File(temporaryFolder, "jwj-" + identifier + '-' + chunkNumber).getAbsolutePath();
}
public String validateRequest(int chunkNumber, int chunkSize, int totalSize, String identifier, String filename,
Integer fileSize) {
identifier = cleanIdentifier(identifier);
if (chunkNumber == 0 || chunkSize == 0 || totalSize == 0 || identifier.length() == 0
|| filename.length() == 0) {
return "non_uploader_request";
}
int numberOfChunks = (int) Math.max(Math.floor(totalSize / (chunkSize * 1.0)), 1);
if (chunkNumber > numberOfChunks) {
return "invalid_uploader_request1";
}
if (this.maxFileSize != null && totalSize > this.maxFileSize) {
return "invalid_uploader_request2";
}
if (fileSize != null) {
if (chunkNumber < numberOfChunks && fileSize != chunkSize) {
return "invalid_uploader_request3";
}
if (numberOfChunks > 1 && chunkNumber == numberOfChunks
&& fileSize != ((totalSize % chunkSize) + chunkSize)) {
return "invalid_uploader_request4";
}
if (numberOfChunks == 1 && fileSize != totalSize) {
return "invalid_uploader_request5";
}
}
return "valid";
}
public int getParamInt(HttpServletRequest req, String key, int def) {
String value = req.getParameter(key);
try {
return Integer.parseInt(value);
} catch (Exception e) {
}
return def;
}
public String getParamString(HttpServletRequest req, String key, String def) {
String value = req.getParameter(key);
try {
return value == null ? def : value;
} catch (Exception e) {
}
return def;
}
public void get(HttpServletRequest req, UploadListener listener) {
int chunkNumber = this.getParamInt(req, "chunkNumber", 0);
int chunkSize = this.getParamInt(req, "chunkSize", 0);
int totalSize = this.getParamInt(req, "totalSize", 0);
String identifier = this.getParamString(req, "identifier", "");
String filename = this.getParamString(req, "filename", "");
if (validateRequest(chunkNumber, chunkSize, totalSize, identifier, filename, null).equals("valid")) {
String chunkFilename = getChunkFilename(chunkNumber, identifier);
if (new File(chunkFilename).exists()) {
listener.callback("found", chunkFilename, filename, identifier, null);
} else {
listener.callback("not_found", null, null, null, null);
}
} else {
listener.callback("not_found", null, null, null, null);
}
}
public void post(HttpServletRequest req, UploadListener listener) throws IllegalStateException, IOException {
int chunkNumber = this.getParamInt(req, "chunkNumber", 0);
int chunkSize = this.getParamInt(req, "chunkSize", 0);
int totalSize = this.getParamInt(req, "totalSize", 0);
String identifier = this.getParamString(req, "identifier", "");
String filename = this.getParamString(req, "filename", "");
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(req.getSession().getServletContext());
if (multipartResolver.isMultipart(req)) {
// 将request变成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) req;
// 获取multiRequest 中所有的文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
String name = iter.next().toString();
// if (!this.fileParameterName.equals(name)) {
// continue;
// }
MultipartFile file = multiRequest.getFile(name);
if (file != null && file.getSize() > 0) {
String original_filename = file.getOriginalFilename();
// String original_filename =
// files[this.fileParameterName]['originalFilename'];
String validation = validateRequest(chunkNumber, chunkSize, totalSize, identifier, filename,
(int) file.getSize());
if ("valid".equals(validation)) {
String chunkFilename = getChunkFilename(chunkNumber, identifier);
File f = new File(chunkFilename);
if (!f.exists()) {
file.transferTo(f);
}
int currentTestChunk = 1;
int numberOfChunks = (int) Math.max(Math.floor(totalSize / (chunkSize * 1.0)), 1);
currentTestChunk = this.testChunkExists(currentTestChunk, chunkNumber, numberOfChunks,
chunkFilename, original_filename, identifier, listener,"file");
} else {
listener.callback(validation, filename, original_filename, identifier,"file");
}
} else {
listener.callback("invalid_uploader_request", null, null, null, null);
}
}
}
}
private void pipeChunk(int number, String identifier, UploadOptions options, OutputStream writableStream)
throws IOException {
String chunkFilename = getChunkFilename(number, identifier);
if (new File(chunkFilename).exists()) {
FileInputStream inputStream = new FileInputStream(new File(chunkFilename));
int maxlen = 1024;
int len = 0;
try {
byte[] buff = new byte[maxlen];
while ((len = inputStream.read(buff, 0, maxlen)) > 0) {
writableStream.write(buff, 0, len);
}
} finally {
inputStream.close();
}
pipeChunk(number + 1, identifier, options, writableStream);
} else {
if (options.end)
writableStream.close();
if (options.listener != null)
options.listener.onDone();
}
}
public void write(String identifier, OutputStream writableStream, UploadOptions options) throws IOException {
if (options == null) {
options = new UploadOptions();
}
if (options.end == null) {
options.end = true;
}
pipeChunk(1, identifier, options, writableStream);
}
/**
*
* @param currentTestChunk
* @param chunkNumber 当前上传块
* @param numberOfChunks 总块数
* @param filename 文件名称
* @param original_filename 源文件名称
* @param identifier 文件
* @param listener 监听
* @param fileType
* @return
*/
private int testChunkExists(int currentTestChunk, int chunkNumber, int numberOfChunks, String filename,
String original_filename, String identifier, UploadListener listener, String fileType) {
String cfile = getChunkFilename(currentTestChunk, identifier);
if (new File(cfile).exists()) {
currentTestChunk++;
if (currentTestChunk >= chunkNumber) {
if (chunkNumber == numberOfChunks) {
try {
System.out.println("done");
// 文件合并
UploadOptions options = new UploadOptions();
File f = new File(this.temporaryFolder,
original_filename.substring(0,original_filename.lastIndexOf("."))+"-"+UuidUtils.uuid()+"." + FilenameUtils.getExtension(original_filename));
options.listener = new UploadDoneListener() {
@Override
public void onError(Exception err) {
listener.callback("invalid_uploader_request", f.getAbsolutePath(), original_filename,
identifier, fileType);
clean(identifier, null);
}
@Override
public void onDone() {
listener.callback("done", f.getAbsolutePath(), original_filename, identifier, fileType);
clean(identifier, null);
}
};
this.write(identifier, new FileOutputStream(f), options);
} catch (FileNotFoundException e) {
e.printStackTrace();
listener.callback("invalid_uploader_request", filename, original_filename, identifier,
fileType);
} catch (IOException e) {
e.printStackTrace();
listener.callback("invalid_uploader_request", filename, original_filename, identifier,
fileType);
}
} else {
listener.callback("partly_done", filename, original_filename, identifier, fileType);
}
} else {
return testChunkExists(currentTestChunk, chunkNumber, numberOfChunks, filename, original_filename,
identifier, listener, fileType);
}
} else {
listener.callback("partly_done", filename, original_filename, identifier, fileType);
}
return currentTestChunk;
}
public void clean(String identifier, UploadOptions options) {
if (options == null) {
options = new UploadOptions();
}
pipeChunkRm(1, identifier, options);
}
private void pipeChunkRm(int number, String identifier, UploadOptions options) {
String chunkFilename = getChunkFilename(number, identifier);
File file = new File(chunkFilename);
if (file.exists()) {
try {
file.delete();
} catch (Exception e) {
if (options.listener != null) {
options.listener.onError(e);
}
}
pipeChunkRm(number + 1, identifier, options);
} else {
if (options.listener != null)
options.listener.onDone();
}
}
public static interface UploadListener {
public void callback(String status, String filename, String original_filename, String identifier,
String fileType);
}
public static interface UploadDoneListener {
public void onDone();
public void onError(Exception err);
}
public static class UploadOptions {
public Boolean end;
public UploadDoneListener listener;
}
}
三、至此就差不多了
但是呢 可能会出现一些小问题 例如文件大小的问题 那么这时候就需要这么一个配置了
这是spring下的配置,自行添加,经god测试,最大上传文件为1GB大小 超出则报错
效果图如下:
对你有用的话请点赞!评论加关注,感谢您的观看!