网站建设与开发的软件,seminar怎么读,新公司网络推广,深圳罗湖区网站建设公司实现文件上传技术选型采用后端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. 大文件上传组件二、阿里云OSS2.1. 注册阿里云2.2. 开通OSS2.3. 进入管控台2.4. 创建 Bucket2.5. 创建OSS用户2.6. OSS权限三、OSS Client 开发文档3.1. OSS Client SDK3.2. 限制3.3. SDK Client四、后端部分4.1.依赖引入4.2. 配置4.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: oss-append},saveType: {default: oss/},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
二、阿里云OSS
官网https://www.aliyun.com
2.1. 注册阿里云
https://account.aliyun.com/register/register.htm
2.2. 开通OSS 2.3. 进入管控台 2.4. 创建 Bucket
读写权限选择【公共读】意思是都可以或者有权限看没其他特殊请求其他的保持默认点击确定即可
2.5. 创建OSS用户 或者
2.6. OSS权限 三、OSS Client 开发文档
https://www.aliyun.com/product/oss
3.1. OSS Client SDK
开发语言java 追加上传断点续传已实现
3.2. 限制 3.3. SDK Client
这里就是官网提供的java语言的SDK Client
四、后端部分
https://help.aliyun.com/document_detail/32009.html
4.1.依赖引入 !-- OSS Java SDK --dependencygroupIdcom.aliyun.oss/groupIdartifactIdaliyun-sdk-oss/artifactIdversion3.10.2/version/dependency4.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# OSS 配置
oss.accessKeyIdxxx
oss.accessKeySecretxxx
oss.endpointhttp://oss-cn-beijing.aliyuncs.com
oss.ossDomainhttp://bucket名称.oss-cn-beijing.aliyuncs.com/
oss.bucketxxxoss.endpoint 和oss.ossDomain获取方式 bucket 获取方式 oss.accessKeyId和oss.accessKeySecret获取方式 4.3. api接口
package com.course.file.controller.admin;import com.alibaba.fastjson.JSON;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.AppendObjectRequest;
import com.aliyun.oss.model.AppendObjectResult;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectRequest;
import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.vod.model.v20170321.GetMezzanineInfoResponse;
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 com.course.server.util.UuidUtil;
import com.course.server.util.VodUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.annotation.Resource;
import java.io.ByteArrayInputStream;RequestMapping(/admin)
RestController
public class OssController {public static final Logger LOG LoggerFactory.getLogger(OssController.class);public static final String BUSINESS_NAME 文件上传;Value(${oss.accessKeyId})private String accessKeyId;Value(${oss.accessKeySecret})private String accessKeySecret;Value(${oss.endpoint})private String endpoint;Value(${oss.bucket})private String bucket;Value(${oss.ossDomain})private String ossDomain;Resourceprivate FileService fileService;/*** oss追加上传** param fileDto* return* throws Exception*/PostMapping(/oss-append)public ResponseDto fileUpload(RequestBody FileDto fileDto) throws Exception {LOG.info(上传文件开始);//接收前端的归属文件类型 COURSE(C, 课程), TEACHER(T, 讲师);String use fileDto.getUse();// 为了支持一个文件上传多次展示历史的不同版本因此上传文件前统一添加文件前缀下载时统一截取文件没那个前8位处理String key fileDto.getKey();//分片索引1表示第1个分片Integer shardIndex fileDto.getShardIndex();// 文件分片大小 shardSize 10 * 1024 * 1024;// 以10MB为一个分片Integer shardSize fileDto.getShardSize();// 具体的文件 由于为了统一使用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();String path new StringBuffer(dir).append(/).append(key).append(.).append(filename).toString();// course\6sfSqfOwzmik4A4icMYuUe.mp4// 创建OSSClient实例。OSS ossClient new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);ObjectMetadata meta new ObjectMetadata();// 指定上传的内容类型。meta.setContentType(text/plain);// 通过AppendObjectRequest设置多个参数。AppendObjectRequest appendObjectRequest new AppendObjectRequest(bucket, path,new ByteArrayInputStream(shard.getBytes()), meta);// 通过AppendObjectRequest设置单个参数。// 设置Bucket名称。//appendObjectRequest.setBucketName(bucketName);// 设置Object名称。即不包含Bucket名称在内的Object的完整路径例如example/test.txt。//appendObjectRequest.setKey(objectName);// 设置待追加的内容。可选类型包括InputStream类型和File类型。此处为InputStream类型。//appendObjectRequest.setInputStream(new ByteArrayInputStream(content1.getBytes()));// 设置待追加的内容。可选类型包括InputStream类型和File类型。此处为File类型。//appendObjectRequest.setFile(new File(D:\\localpath\\examplefile.txt));// 指定文件的元信息第一次追加时有效。//appendObjectRequest.setMetadata(meta);// 第一次追加。// 设置文件的追加位置。// appendObjectRequest.setPosition(0L);appendObjectRequest.setPosition((long) (shardIndex - 1) * shardSize);AppendObjectResult appendObjectResult ossClient.appendObject(appendObjectRequest);// 文件的64位CRC值。此值根据ECMA-182标准计算得出System.out.println(appendObjectResult.getObjectCRC());// 关闭OSSClient。ossClient.shutdown();LOG.info(保存文件记录开始);fileDto.setPath(path);fileService.save(fileDto);ResponseDto responseDto new ResponseDto();// 文件OSS地址存储到fileDto统一返回前端fileDto.setPath(ossDomain path);responseDto.setContent(fileDto);return responseDto;}/*** 断点续传检查** param key* return* throws Exception*/GetMapping(/check/oss/{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(ossDomain fileDto.getPath());}responseDto.setContent(fileDto);return responseDto;}
}
