靖江做网站哪家好,提高seo关键词排名,短视频剪辑自学,WordPress建影视站文章目录一. 需求分析1). 需求分析2). 图片上传流程二. 创建文件系统服务工程1). 工程目录结构2). 项目依赖pom.xml3). 配置文件application.yml三. 后端开发1. 模型类1). 模型类2). Collection2. Api接口3. Dao4. Service5. Controller6. 测试四. 前端开发1. 需求2. 页面1). T…
文章目录一. 需求分析1). 需求分析2). 图片上传流程二. 创建文件系统服务工程1). 工程目录结构2). 项目依赖pom.xml3). 配置文件application.yml三. 后端开发1. 模型类1). 模型类2). Collection2. Api接口3. Dao4. Service5. Controller6. 测试四. 前端开发1. 需求2. 页面1). Template2). 数据模型一. 需求分析
1). 需求分析
在很多系统都有上传图片/上传文件的需求比如上传课程图片、上传课程资料、上传用户头像等
为了提供系统的可重用性专门设立文件系统服务承担图片/文件的管理文件系统服务实现对文件的上传、删除、查询等功能进行管理
各个子系统不再开发上传文件的请求通过文件系统服务进行文件的上传、删除等操作
文件系统服务最终会将文件存储到fastDSF文件系统中。
下图是各个子系统与文件系统服务之间的关系
2). 图片上传流程
其中课程管理服务中上传图片处理流程如下
执行流程如下 1、管理员进入教学管理前端点击上传图片 2、图片上传至文件系统服务文件系统请求fastDFS上传文件 3、文件系统将文件入库存储到文件系统服务数据库中。 4、文件系统服务向前端返回文件上传结果如果成功则包括文件的Url路径。
5、课程管理前端请求课程管理服务进行保存课程图片信息到课程数据库。 6、课程管理服务将课程和图片保存在课程数据库。
二. 创建文件系统服务工程
1). 工程目录结构 2). 项目依赖pom.xml
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdparentartifactIdxc-framework-parent/artifactIdgroupIdcom.xuecheng/groupIdversion1.0-SNAPSHOT/versionrelativePath../xc-framework-parent/pom.xml/relativePath/parentmodelVersion4.0.0/modelVersionartifactIdxc-service-base-filesystem/artifactIddependenciesdependencygroupIdcom.xuecheng/groupIdartifactIdxc-service-api/artifactIdversion1.0-SNAPSHOT/version/dependencydependencygroupIdcom.xuecheng/groupIdartifactIdxc-framework-model/artifactIdversion1.0-SNAPSHOT/version/dependencydependencygroupIdcom.xuecheng/groupIdartifactIdxc-framework-common/artifactIdversion1.0-SNAPSHOT/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdnet.oschina.zcx7878/groupIdartifactIdfastdfs-client-java/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.apache.commons/groupIdartifactIdcommons-io/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-mongodb/artifactId/dependency/dependencies/project3). 配置文件application.yml
server:port: 22100
spring:application:name: xc-service-base-filesystem
#mongo配置data:mongodb:database: xc_fsuri: mongodb://root:123127.0.0.1:27017
#SpringMVC上传文件配置servlet:multipart:#默认支持文件上传.enabled: true#支持文件写入磁盘.file-size-threshold: 0# 上传文件的临时目录location:# 最大支持文件大小max-file-size: 1MB# 最大支持请求大小max-request-size: 30MB
xuecheng:fastdfs:connect_timeout_in_seconds: 5network_timeout_in_seconds: 30charset: UTF-8tracker_servers: 192.168.101.65:22122 #多个 trackerServer中间以逗号分隔三. 后端开发
1. 模型类
1). 模型类
系统的文件信息图片、文档等小文件的信息在mongodb中存储下边是文件信息的模型类
package com.xuecheng.framework.domain.filesystem;import lombok.Data;
import lombok.ToString;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;import java.util.Map;Data
ToString
Document(collection filesystem)
public class FileSystem {Idprivate String fileId;//文件请求路径private String filePath;//文件大小private long fileSize;//文件名称private String fileName;//文件类型private String fileType;//图片宽度private int fileWidth;//图片高度private int fileHeight;//用户id用于授权private String userId;//业务keyprivate String businesskey;//业务标签private String filetag;//文件元信息private Map metadata;}
说明
fileIdfastDFS返回的文件ID。
filePath请求fastDFS浏览文件URL。
businesskey文件系统服务为其它子系统提供的一个业务标识字段各子系统根据自己的需求去使用比如课 程管理会在此字段中存储课程id用于标识该图片属于哪个课程。
filetag文件标签由于文件系统服务是公共服务文件系统服务会为使用文件系统服务的子系统分配文件标签 用于标识此文件来自哪个系统。
metadata文件相关的元信息。
2). Collection
在mongodb创建数据库xc_fs文件系统数据库并创建集合 filesystem。 2. Api接口
文件位置xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\filesystem\ FileSystemControllerApi.java
package com.xuecheng.api.filesystem;import com.xuecheng.framework.domain.filesystem.response.UploadFileResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.web.multipart.MultipartFile;/*** Created by Administrator.*/
Api(value文件管理接口,description 文件管理接口提供文件的增、删、改、查)
public interface FileSystemControllerApi {//上传文件ApiOperation(上传文件接口)public UploadFileResult upload(MultipartFile multipartFile,String filetag,String businesskey,String metadata);}
3. Dao
文件位置xcEduService01\xc-service-base-filesystem\src\main\java\com\xuecheng\filesystem\dao\ FileSystemRepository.java
package com.xuecheng.filesystem.dao;import com.xuecheng.framework.domain.filesystem.FileSystem;
import org.springframework.data.mongodb.repository.MongoRepository;public interface FileSystemRepository extends MongoRepositoryFileSystem,String {
}
4. Service
文件位置xcEduService01\xc-service-base-filesystem\src\main\java\com\xuecheng\filesystem\service\ FileSystemService.java
package com.xuecheng.filesystem.service;import com.alibaba.fastjson.JSON;
import com.xuecheng.filesystem.dao.FileSystemRepository;
import com.xuecheng.framework.domain.filesystem.FileSystem;
import com.xuecheng.framework.domain.filesystem.response.FileSystemCode;
import com.xuecheng.framework.domain.filesystem.response.UploadFileResult;
import com.xuecheng.framework.exception.ExceptionCast;
import com.xuecheng.framework.model.response.CommonCode;
import org.apache.commons.lang3.StringUtils;
import org.csource.fastdfs.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import java.util.Map;/*** author Administrator* version 1.0**/
Service
public class FileSystemService {Value(${xuecheng.fastdfs.tracker_servers})String tracker_servers;Value(${xuecheng.fastdfs.connect_timeout_in_seconds})int connect_timeout_in_seconds;Value(${xuecheng.fastdfs.network_timeout_in_seconds})int network_timeout_in_seconds;Value(${xuecheng.fastdfs.charset})String charset;AutowiredFileSystemRepository fileSystemRepository;//上传文件public UploadFileResult upload( MultipartFile multipartFile,String filetag,String businesskey,String metadata){if(multipartFile null){ExceptionCast.cast(FileSystemCode.FS_UPLOADFILE_FILEISNULL);}//第一步将文件上传到fastDFS中得到一个文件idString fileId fdfs_upload(multipartFile);if(StringUtils.isEmpty(fileId)){ExceptionCast.cast(FileSystemCode.FS_UPLOADFILE_SERVERFAIL);}//第二步将文件id及其它文件信息存储到mongodb中。FileSystem fileSystem new FileSystem();fileSystem.setFileId(fileId);fileSystem.setFilePath(fileId);fileSystem.setFiletag(filetag);fileSystem.setBusinesskey(businesskey);fileSystem.setFileName(multipartFile.getOriginalFilename());fileSystem.setFileType(multipartFile.getContentType());if(StringUtils.isNotEmpty(metadata)){try {Map map JSON.parseObject(metadata, Map.class);fileSystem.setMetadata(map);} catch (Exception e) {e.printStackTrace();}}fileSystemRepository.save(fileSystem);return new UploadFileResult(CommonCode.SUCCESS,fileSystem);}//上传文件到fastDFS/**** param multipartFile 文件* return 文件id*/private String fdfs_upload(MultipartFile multipartFile){//初始化fastDFS的环境initFdfsConfig();//创建trackerClientTrackerClient trackerClient new TrackerClient();try {TrackerServer trackerServer trackerClient.getConnection();//得到storage服务器StorageServer storeStorage trackerClient.getStoreStorage(trackerServer);//创建storageClient来上传文件StorageClient1 storageClient1 new StorageClient1(trackerServer,storeStorage);//上传文件//得到文件字节byte[] bytes multipartFile.getBytes();//得到文件的原始名称String originalFilename multipartFile.getOriginalFilename();//得到文件扩展名String ext originalFilename.substring(originalFilename.lastIndexOf(.) 1);String fileId storageClient1.upload_file1(bytes, ext, null);return fileId;} catch (Exception e) {e.printStackTrace();}return null;}//初始化fastDFS环境private void initFdfsConfig(){//初始化tracker服务地址多个tracker中间以半角逗号分隔try {ClientGlobal.initByTrackers(tracker_servers);ClientGlobal.setG_charset(charset);ClientGlobal.setG_network_timeout(network_timeout_in_seconds);ClientGlobal.setG_connect_timeout(connect_timeout_in_seconds);} catch (Exception e) {e.printStackTrace();//抛出异常ExceptionCast.cast(FileSystemCode.FS_INITFDFSERROR);}}
}
5. Controller
文件位置xcEduService01\xc-service-base-filesystem\src\main\java\com\xuecheng\filesystem\controller\ FileSystemController.java
package com.xuecheng.filesystem.controller;import com.xuecheng.api.filesystem.FileSystemControllerApi;
import com.xuecheng.filesystem.service.FileSystemService;
import com.xuecheng.framework.domain.filesystem.response.UploadFileResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;/*** author Administrator* version 1.0**/
RestController
RequestMapping(/filesystem)
public class FileSystemController implements FileSystemControllerApi {AutowiredFileSystemService fileSystemService;OverridePostMapping(/upload)public UploadFileResult upload(MultipartFile multipartFile, String filetag, String businesskey, String metadata) {return fileSystemService.upload(multipartFile, filetag, businesskey, metadata);}
}
6. 测试
使用swagger-ui或postman进行测试。下图是使用swagger-ui进行测试的界面 四. 前端开发
1. 需求
上传图片界面如下图点击“加号”上传图片图片上传成功自动显示点击“删除”将删除图片。 2. 页面
使用Element-UI的Upload上传组件实现上边的效果。 文件位置xc-ui-pc-teach\src\module\course\page\course_manage\course_picture.vue
1). Template
templatedivel-uploadaction/api/filesystem/uploadlist-typepicture-card:before-uploadsetuploaddata:on-successhandleSuccess:file-listfileList:limitpicmax:on-exceedrejectupload:before-removehandleRemove:datauploadvalnamemultipartFilei classel-icon-plus/i/el-upload/div
/templateel-upload参数说明 action必选参数上传的地址 list-type文件列表的类型text/picture/picture-card before-upload上传前执行钩子方法 function(file) on-success上传成功 执行的钩子方法 function(response, file, fileList) on-error上传失败的钩子方法function(err, file, fileList) on-remove文件删除的钩子方法function(file, fileList) file-list文件列表此列表为上传成功 的文件 limit最大允许上传个数 on-exceed文件超出个数限制时的钩子方法为function(files, fileList) data提交上传的额外参数需要封装为json对象最终提交给服务端为key/value串
2). 数据模型
scriptimport * as sysConfig from /../config/sysConfig;import * as courseApi from ../../api/course;import utilApi from ../../../../common/utils;import * as systemApi from ../../../../base/api/system;export default {data() {return {picmax:1,//最大上传文件的数量courseid:,dialogImageUrl: ,dialogVisible: false,fileList:[],uploadval:{filetag:course,businesskey:testbusinesskey},//上传提交的额外的数据 将uploadval转成key/value提交给服务器imgUrl:sysConfig.imgUrl}},methods: {//超出文件上传个数提示信息rejectupload(){this.$message.error(最多上传this.picmax个图片);},//在上传前设置上传请求的数据setuploaddata(){},//删除图片handleRemove(file, fileList) {console.log(file)return new Promise((resolve,reject){courseApi.deleteCoursePic(this.courseid).then(res{if(res.success){//成功resolve();}else{this.$message.error(删除失败);//失败reject();}})})//上传成功的钩子方法handleSuccess(response, file, fileList){console.log(response)
// alert(上传成功)//调用课程管理的保存图片接口将图片信息保存到课程管理数据库course_pic中//从response得到新的图片文件的地址if(response.success){let fileId response.fileSystem.fileId;courseApi.addCoursePic(this.courseid,fileId).then(res{if(res.success){this.$message.success(上传图片成功)}else{this.$message.error(res.message)}})}},//上传失败执行的钩子方法handleError(err, file, fileList){this.$message.error(上传失败);//清空文件队列this.fileList []},//promise 有三种状态://进行中pending//执行成功 resolve//执行失败 rejecttestPromise(i){return new Promise((resolve,reject){if(i2){//成功了resolve(成功了);}else{//失败了reject(失败了);}})}},mounted(){//课程idthis.courseid this.$route.params.courseid;//查询课程courseApi.findCoursePicList(this.courseid).then(res{if(res res.pic){let imgUrl this.imgUrlres.pic;//将图片地址设置到this.fileList.push({name:pic,url:imgUrl,fileId:res.pic})}}).catch(res{})/script
