网站被黑咋样的,邯郸做网站哪儿好,莱州网站建设公司电话,网站开发基础知识简述公司实现文件上传技术选型采用后端SpringBoot/Cloud#xff0c;前端vue Bootstrap #xff0c;阿里云OSS作为文件存储#xff0c;大文件上传功能单独抽取封装大文件上传组件#xff0c;可供所有的大文件的操作。 后端框架版本SpringBoot2.5.6Spring-Cloud2020.0.4mysql8.0.… 公司实现文件上传技术选型采用后端SpringBoot/Cloud前端vue Bootstrap 阿里云OSS作为文件存储大文件上传功能单独抽取封装大文件上传组件可供所有的大文件的操作。 后端框架版本SpringBoot2.5.6Spring-Cloud2020.0.4mysql8.0.26pagehelper1.3.1Mybatis2.2.0Redis5.0Fastjson1.2.78
前端框架版本Vue2.6.11axios0.24.0vue-router3.5.3Bootstrap4.6.2文章目录一、前端部分1. 小节页面2. js部分3. 大文件上传组件二、后端部分2.1. 配置2.2. 配置2.3. api接口一、前端部分
1. 小节页面
小节页面作为文件上传父页面 div classform-grouplabel classcol-sm-2 control-label视频/labeldiv classcol-sm-10vod :text上传视频:input-idvideo-upload:suffixs[mp4]:useFILE_USE.COURSE.key:after-uploadafterUpload/voddiv v-showsection.video classrowdiv classcol-md-9player v-bind:player-idform-player-divrefplayer/playervideo v-bind:srcsection.video idvideo controlscontrols classhidden/video/div/div/div/div2. js部分
scriptimport BigFile from /components/big-file;export default {components: { BigFile },name: business-section,data: function () {return {section: {},sections: [],FILE_USE: FILE_USE,}},methods: {/*** 点击【新增】*/add() {let _this this_this.section {}$(#form-modal).modal(show)},/*** 点击【编辑】*/edit(section) {let _this this_this.section $.extend({}, section)$(#form-modal).modal(show)},/*** 点击【保存】*/save() {let _this this_this.section.video ;// 保存校验if (1 ! 1|| !Validator.require(_this.section.title, 标题)|| !Validator.length(_this.section.title, 标题, 1, 50)|| !Validator.length(_this.section.video, 视频, 1, 200)) {return;}_this.section.courseId _this.course.id_this.section.chapterId _this.chapter.idLoading.show()_this.$api.post(process.env.VUE_APP_SERVER /business/admin/section/save, _this.section).then((res) {Loading.hide()let resp res.dataif (resp.success) {$(#form-modal).modal(hide)_this.list(1)Toast.success(保存成功)} else {Toast.warning(resp.message)}})},afterUpload(resp) {let _this thislet video resp.content.path;},},
}/script
3. 大文件上传组件
templatedivbutton typebutton v-on:clickselectFile() classbtn btn-white btn-default btn-roundi classace-icon fa fa-upload/i{{ text }}/buttoninput classhidden typefile reffile v-on:changeuploadFile() v-bind:idinputId-input/div
/templatescript
export default {name: big-file,props: {text: {default: 上传大文件},inputId: {default: file-upload},suffixs: {default: []},use: {default: },shardSize: {default: 50 * 1024},url: {default: upload},saveType: {default: local/},afterUpload: {type: Function,default: null},},data: function () {return {}},methods: {uploadFile() {let _this this;let formData new window.FormData();let file _this.$refs.file.files[0];console.log(JSON.stringify(file));/*name: test.mp4lastModified: 1901173357457lastModifiedDate: Tue May 27 2099 14:49:17 GMT0800 (中国标准时间) {}webkitRelativePath: size: 37415970type: video/mp4*/// 生成文件标识标识多次上传的是不是同一个文件let key hex_md5(file.name file.size file.type);let key10 parseInt(key, 16);let key62 Tool._10to62(key10);console.log(key, key10, key62);console.log(hex_md5(Array()));/*d41d8cd98f00b204e9800998ecf8427e2.8194976848941264e386sfSqfOwzmik4A4icMYuUe*/// 判断文件格式let suffixs _this.suffixs;let fileName file.name;let suffix fileName.substring(fileName.lastIndexOf(.) 1, fileName.length).toLowerCase();let validateSuffix false;for (let i 0; i suffixs.length; i) {if (suffixs[i].toLowerCase() suffix) {validateSuffix true;break;}}if (!validateSuffix) {Toast.warning(文件格式不正确只支持上传 suffixs.join(,));$(# _this.inputId -input).val();return;}// 文件分片// let shardSize 10 * 1024 * 1024; //以10MB为一个分片// let shardSize 50 * 1024; //以50KB为一个分片let shardSize _this.shardSize;let shardIndex 1; //分片索引1表示第1个分片let size file.size;let shardTotal Math.ceil(size / shardSize); //总片数let param {shardIndex: shardIndex,shardSize: shardSize,shardTotal: shardTotal,use: _this.use,name: file.name,suffix: suffix,size: file.size,key: key62};_this.check(param);},/*** 检查文件状态是否已上传过传到第几个分片*/check(param) {let _this this;_this.$api.get(process.env.VUE_APP_SERVER /file/admin/check/ _this.saveType param.key).then((response) {let resp response.data;if (resp.success) {let obj resp.content;if (!obj) {param.shardIndex 1;console.log(没有找到文件记录从分片1开始上传);_this.upload(param);} else if (obj.shardIndex obj.shardTotal) {// 已上传分片 分片总数说明已全部上传完不需要再上传Toast.success(文件极速秒传成功);_this.afterUpload(resp);$(# _this.inputId -input).val();} else {param.shardIndex obj.shardIndex 1;console.log(找到文件记录从分片 param.shardIndex 开始上传);_this.upload(param);}} else {Toast.warning(文件上传失败);$(# _this.inputId -input).val();}})},/*** 将分片数据转成base64进行上传*/upload(param) {let _this this;let shardIndex param.shardIndex;let shardTotal param.shardTotal;let shardSize param.shardSize;let fileShard _this.getFileShard(shardIndex, shardSize);// 将图片转为base64进行传输let fileReader new FileReader();Progress.show(parseInt((shardIndex - 1) * 100 / shardTotal));fileReader.onload function (e) {let base64 e.target.result;// console.log(base64:, base64);param.shard base64;_this.$api.post(process.env.VUE_APP_SERVER /file/admin/ _this.url, param).then((response) {let resp response.data;console.log(上传文件成功, resp);Progress.show(parseInt(shardIndex * 100 / shardTotal));if (shardIndex shardTotal) {// 上传下一个分片param.shardIndex param.shardIndex 1;_this.upload(param);} else {Progress.hide();_this.afterUpload(resp);$(# _this.inputId -input).val();}});};fileReader.readAsDataURL(fileShard);},getFileShard(shardIndex, shardSize) {let _this this;let file _this.$refs.file.files[0];let start (shardIndex - 1) * shardSize; //当前分片起始位置let end Math.min(file.size, start shardSize); //当前分片结束位置let fileShard file.slice(start, end); //从文件中截取当前的分片数据return fileShard;},selectFile() {let _this this;$(# _this.inputId -input).trigger(click);}}
}
/script
二、后端部分
2.1. 配置
package com.course.file.config;import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;Configuration
public class SpingMvConfig implements WebMvcConfigurer {Value(${file.path})private String FILE_PATH;Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(/f/**).addResourceLocations(file: FILE_PATH);}
}
2.2. 配置
# 应用名称
spring.application.namefile
# 应用端口
server.port9003
# 注册到eureka
eureka.client.service-url.defaultZonehttp://localhost:8761/eureka# 请求访问前缀
server.servlet.context-path/file# 本地存储静态文件路径
file.pathD:/file/imooc/course/
# 访问静态文件路径用于文件回显或者文件下载
file.domainhttp://127.0.0.1:9000/file/f/# 文件大小如果搭建大小超过此配置的大小或抛出异常
spring.servlet.multipart.max-file-size50MB
# 请求大小
spring.servlet.multipart.max-request-size50MB
2.3. api接口
package com.course.file.controller.admin;import com.course.server.dto.FileDto;
import com.course.server.dto.ResponseDto;
import com.course.server.enums.FileUseEnum;
import com.course.server.service.FileService;
import com.course.server.util.Base64ToMultipartFile;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.annotation.Resource;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;RequestMapping(/admin)
RestController
public class UploadController {public static final Logger LOG LoggerFactory.getLogger(UploadController.class);public static final String BUSINESS_NAME 文件上传;Value(${file.domain})private String FILE_DOMAIN;Value(${file.path})private String FILE_PATH;Value(${vod.accessKeyId})private String accessKeyId;Value(${vod.accessKeySecret})private String accessKeySecret;Resourceprivate FileService fileService;PostMapping(/upload)public ResponseDto upload(RequestBody FileDto fileDto) throws Exception {LOG.info(上传文件开始);//接收前端的归属文件类型 COURSE(C, 课程), TEACHER(T, 讲师);String use fileDto.getUse();// 为了支持一个文件上传多次展示历史的不同版本因此上传文件前统一添加文件前缀下载时统一截取文件没那个前8位处理String key fileDto.getKey();// 具体的文件 由于为了统一使用FileDto对象接收默认接收类型是MultipartFile这里现在接收类型是String 前端将文件提前转成了Base64String shardBase64 fileDto.getShard();// 将具体的文件在由Base64转成MultipartFile类型MultipartFile shard Base64ToMultipartFile.base64ToMultipart(shardBase64);//接收前端的归属文件类型 COURSE(C, 课程), TEACHER(T, 讲师);FileUseEnum useEnum FileUseEnum.getByCode(use);//文件全名String filename shard.getOriginalFilename();//如果文件夹不存在则创建String dir useEnum.name().toLowerCase();File fullDir new File(FILE_PATH dir);if (!fullDir.exists()) {fullDir.mkdirs();}String path new StringBuffer(dir).append(File.separator).append(key).append(.).append(filename).toString(); // course\6sfSqfOwzmik4A4icMYuUe.mp4String localPath new StringBuffer(path).append(.).append(fileDto.getShardIndex()).toString(); // course\6sfSqfOwzmik4A4icMYuUe.mp4.1String fullPath FILE_PATH localPath;File dest new File(fullPath);shard.transferTo(dest);LOG.info(dest.getAbsolutePath());LOG.info(保存文件记录开始);fileDto.setPath(path);fileService.save(fileDto);ResponseDto responseDto new ResponseDto();fileDto.setPath(FILE_DOMAIN path);responseDto.setContent(fileDto);// 判断当前分片数是否等于总片数如果相等就进行文件合并if (fileDto.getShardIndex().equals(fileDto.getShardTotal())) {this.merge(fileDto);}return responseDto;}public void merge(FileDto fileDto) throws Exception {LOG.info(合并分片开始);String path fileDto.getPath(); //http://127.0.0.1:9000/file/f/course\6sfSqfOwzmik4A4icMYuUe.mp4path path.replace(FILE_DOMAIN, ); //course\6sfSqfOwzmik4A4icMYuUe.mp4Integer shardTotal fileDto.getShardTotal();File newFile new File(FILE_PATH path);FileOutputStream outputStream new FileOutputStream(newFile, true);//文件追加写入FileInputStream fileInputStream null;//分片文件byte[] byt new byte[10 * 1024 * 1024];int len;try {for (int i 0; i shardTotal; i) {// 读取第i个分片fileInputStream new FileInputStream(new File(FILE_PATH path . (i 1))); // course\6sfSqfOwzmik4A4icMYuUe.mp4.1while ((len fileInputStream.read(byt)) ! -1) {outputStream.write(byt, 0, len);}}} catch (IOException e) {LOG.error(分片合并异常, e);} finally {try {if (fileInputStream ! null) {fileInputStream.close();}outputStream.close();LOG.info(IO流关闭);} catch (Exception e) {LOG.error(IO流关闭, e);}}LOG.info(合并分片结束);System.gc();Thread.sleep(100);// 删除分片LOG.info(删除分片开始);for (int i 0; i shardTotal; i) {String filePath FILE_PATH path . (i 1);File file new File(filePath);boolean result file.delete();LOG.info(删除{}{}, filePath, result ? 成功 : 失败);}LOG.info(删除分片结束);}/*** 断点续传检查** param key* return* throws Exception*/GetMapping(/check/local/{key})public ResponseDto check(PathVariable String key) throws Exception {LOG.info(检查上传分片开始{}, key);ResponseDto responseDto new ResponseDto();FileDto fileDto fileService.findByKey(key);if (fileDto ! null) {fileDto.setPath(FILE_DOMAIN fileDto.getPath());}responseDto.setContent(fileDto);return responseDto;}
}
