一. 需求分析

1). 需求分析

在很多系统都有上传图片/上传文件的需求，比如：上传课程图片、上传课程资料、上传用户头像等；

为了提供系统的可重用性，专门设立文件系统服务承担图片/文件的管理，文件系统服务实现对文件的上传、删除、查询等功能进行管理；

各个子系统不再开发上传文件的请求，通过文件系统服务进行文件的上传、删除等操作；

文件系统服务最终会将文件存储到fastDSF文件系统中。

下图是各个子系统与文件系统服务之间的关系：

2). 图片上传流程

其中，课程管理服务中上传图片处理流程如下：

执行流程如下：
1、管理员进入教学管理前端，点击上传图片
2、图片上传至文件系统服务，文件系统请求fastDFS上传文件
3、文件系统将文件入库，存储到文件系统服务数据库中。
4、文件系统服务向前端返回文件上传结果，如果成功则包括文件的Url路径。

5、课程管理前端请求课程管理服务进行保存课程图片信息到课程数据库。
6、课程管理服务将课程和图片保存在课程数据库。

二. 创建文件系统服务工程

1). 工程目录结构

2). 项目依赖pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><artifactId>xc-framework-parent</artifactId><groupId>com.xuecheng</groupId><version>1.0-SNAPSHOT</version><relativePath>../xc-framework-parent/pom.xml</relativePath></parent><modelVersion>4.0.0</modelVersion><artifactId>xc-service-base-filesystem</artifactId><dependencies><dependency><groupId>com.xuecheng</groupId><artifactId>xc-service-api</artifactId><version>1.0-SNAPSHOT</version></dependency><dependency><groupId>com.xuecheng</groupId><artifactId>xc-framework-model</artifactId><version>1.0-SNAPSHOT</version></dependency><dependency><groupId>com.xuecheng</groupId><artifactId>xc-framework-common</artifactId><version>1.0-SNAPSHOT</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>net.oschina.zcx7878</groupId><artifactId>fastdfs-client-java</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.apache.commons</groupId><artifactId>commons-io</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency></dependencies></project>

3). 配置文件application.yml

server:port: 22100
spring:application:name: xc-service-base-filesystem
#mongo配置data:mongodb:database: xc_fsuri: mongodb://root:123@127.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;}

说明：

fileId：fastDFS返回的文件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 MongoRepository<FileSystem,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;@Override@PostMapping("/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

<template><div><el-uploadaction="/api/filesystem/upload"list-type="picture-card":before-upload="setuploaddata":on-success="handleSuccess":file-list="fileList":limit="picmax":on-exceed="rejectupload":before-remove="handleRemove":data="uploadval"name="multipartFile"><i class="el-icon-plus"></i></el-upload></div>
</template>

el-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). 数据模型

<script>import * 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(i<2){//成功了resolve('成功了');}else{//失败了reject('失败了');}})}},mounted(){//课程idthis.courseid = this.$route.params.courseid;//查询课程courseApi.findCoursePicList(this.courseid).then(res=>{if(res && res.pic){let imgUrl = this.imgUrl+res.pic;//将图片地址设置到this.fileList.push({name:'pic',url:imgUrl,fileId:res.pic})}}).catch(res=>{})</script>