SpringBoot 实现大文件断点续传（前端基于WebUploader实现，1G文件上传只需5s

• },
  

• onProgress: ({ data, percentage }) => {
  

• },
  

• });

• uploader.start();

• @class Uploader

*/

class Uploader {

constructor({ file, onSuccess, onError, onProgress }) {

// const files = e.target.files || e.dataTransfer.files;

// 转化为WebUploader的内部file对象

this.file = new WebUploader.File(new WebUploader.Lib.File(WebUploader.guid(‘rt_’), file));

this.onSuccess = props => {

this.clean();

if (onSuccess) onSuccess(props);

};

this.onError = props => {

this.clean();

if (onError) onError(props);

};

this.onProgress = onProgress;

this.uploader = null;

}

init = () => {

WebUploader.Uploader.register({

name: ‘webUploaderHookCommand’,

‘before-send-file’: ‘beforeSendFile’,

‘before-send’: ‘beforeSend’,

‘after-send-file’: ‘afterSendFile’,

}, {

beforeSendFile: file => {

const task = new WebUploader.Deferred();

this.fileName = file.name;

this.fileSize = file.size;

this.mimetype = file.type;

this.fileExt = file.ext;

(new WebUploader.Uploader())

.md5File(file, 0, 10 * 1024 * 1024 * 1024 * 1024).progress(percentage => { })

.then(val => {

this.fileMd5 = val;

const url = ${BPR_BASE_URL}/register;

const data = {

fileMd5: this.fileMd5,

fileName: file.name,

fileSize: file.size,

mimetype: file.type,

fileExt: file.ext,

};

request(url, {

method: ‘post’,

data,

}).then(res => {

console.log(‘register’, res);

if (res && res.status === 1) {

task.resolve();

} else if (res && res.data && res.code === 103404) {

// 文件已上传

this.onSuccess({

fileName: this.fileName,

resourceId: res.data.resId,

filePath: res.data.filePath,

});

task.reject();

} else {

file.statusText = res && res.message;

task.reject();

}

});

});

return task.promise();

},

beforeSend: block => {

console.log(‘beforeSend’);

const task = new WebUploader.Deferred();

const url = ${BPR_BASE_URL}/checkChunk;

const data = {

fileMd5: this.fileMd5,

chunk: block.chunk,

chunkSize: block.end - block.start,

};

request(url, {

method: ‘post’,

data,

}).then(res => {

console.log(‘checkChunk’, res);

if (res && res.data === true) {

task.reject(); // 分片存在，则跳过上传

} else {

task.resolve();

}

});

this.uploader.options.formData.fileMd5 = this.fileMd5;

this.uploader.options.formData.chunk = block.chunk;

return task.promise();

},

afterSendFile: () => {

console.log(‘start afterSendFile’);

const task = new WebUploader.Deferred();

const url = ${BPR_BASE_URL}/mergeChunks;

const data = {

fileMd5: this.fileMd5,

fileName: this.fileName,

fileSize: this.fileSize,

mimetype: this.mimetype,

fileExt: this.fileExt,

};

request(url, {

method: ‘post’,

data,

}).then(res => {

console.log(‘mergeChunks’, res);

if (res && res.status === 1 && res.data && res.data.resId) {

task.resolve();

this.onSuccess({

fileName: this.fileName,

resourceId: res.data.resId,

filePath: res.data.filePath,

});

} else {

task.reject();

this.onError({ msg: ‘合并文件失败’ });

}

});

},

});

}

clean = () => {

if (this.uploader) {

WebUploader.Uploader.unRegister(‘webUploaderHookCommand’);

}

}

start = () => {

if (!this.uploader) {

this.init();

}

// 实例化

this.uploader = WebUploader.create({

server: BPR_BASE_URL,

chunked: true,

chunkSize: 1024 * 1024 * 5,

chunkRetry: 1,

threads: 3,

duplicate: true,

formData: { // 上传分片的http请求中一同携带的数据

appid: ‘1’,

token: localStorage.getItem(TP_TOKE),

methodname: ‘breakpointRenewal’,

},

});

// 一个分片上传成功后，调用该方法

this.uploader.on(‘uploadProgress’, (data, percentage) => {

console.log(‘uploadProgress’);

this.onProgress({ data, percentage });

});

this.uploader.on(‘error’, err => {

this.onError({ msg: ‘上传出错，请重试’ });

});

this.uploader.addFiles(this.file);

this.uploader.upload();

}

cancel = () => {

console.log(‘call cancel’);

this.uploader.stop(true);

this.uploader.destroy();

console.log(‘getStats’, this.uploader.getStats());

}

}

export default Uploader;

在 @/utils/constant 文件中定义了上述代码中所使用的常量，代码如下：

const constants = {

BPR_BASE_URL: ‘/v1.0/sys/admin/files/breakpointRenewal’,

};

module.exports = constants;

到这里前端代码就写完了。

二、后端代码

---

1、maven依赖

com.aliyun.oss

aliyun-sdk-oss

3.11.0

commons-fileupload

commons-fileupload

1.3.1

commons-lang

commons-lang

2.6

compile

2、ResponseEnum代码

/**

• @Description: 返回码常量类

• @Author: henry

• @Date: 2019/6/21

• code范围：

• 成功:200

• 公共:0001-0999

• PaaS

• FM 103400-103599

*/

public enum ResponseEnum {

/**

• 公共模块码

*/

RESPONSE_CODE_FAIL(100, “请求失败”),

RESPONSE_CODE_SUCCESS(200, “请求成功”),

RESPONSE_CODE_PARAM_ERR(400, “请求参数错误”),

RESPONSE_CODE_PARAM_VALUE_ERR(401, “参数值错误”),

RESPONSE_CODE_PARAM_EMPTY(402, “缺少参数”),

RESPONSE_CODE_NOT_FOUND(404, “找不到指定的资源”),

RESPONSE_CODE_METHOD_NOT_SUPPORT(405, “请求方法不支持”),

RESPONSE_CODE_TYPE_NOT_ACCEPTABLE(406, “请求类型不接受”),

RESPONSE_CODE_METHOD_NOT_EXIST(407, “请求方法不存在”),

RESPONSE_CODE_PARAM_NOT_NULL(430, “参数为空”),

RESPONSE_CODE_RECORD_ALREADY_EXISTS(431, “数据已存在”),

RESPONSE_CODE_RECORD_NOT_EXISTS(432, “数据不存在”),

RESPONSE_CODE_JSON_ERROR(433, “JSON格式不正确”),

RESPONSE_CODE_PARAM_LENGTH_TOO_MIN(434, “参数长度过短”),

RESPONSE_CODE_PARAM_LENGTH_TOO_MAX(435, “参数长度过长”),

RESPONSE_CODE_NOTLANK_PARAM_NOT_EXISTS(436, “必填参数不存在”),

RESPONSE_CODE_VERIFICATION_CODE_ERROR(442, “验证码无效”),<