如何用分布式服务器FastDFS实现SSMD+Angularjs文件上传 -代码详解

FastDFS执行流程图:

FastDFS概述:FastDFS(Fast Distributed file system)是用c语言编写的一款开源的分布式文件系统。FastDFS为互联网量身定制，充分考虑了冗余备份、负载均衡、横向扩展等机制，并注重高可用、高性能等指标，使用FastDFS很容易搭建一套高性能的文件服务器集群提供文件上传、下载等服务。

一.环境准备

1.导入依赖

<!-- commons-fileupload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId></dependency><!-- fastdfs-client --><dependency><groupId>org.csource</groupId><artifactId>fastdfs-client</artifactId></dependency>

2.编写配置文件

添加Tracker Server与Storage Server地址

// 在application.properties中文件服务器所在主机ip:fileServerUrl=http://192.168.224.99 // fastdfs-client.conf 配置追踪服务器地址:tracker_server=192.168.224.99:22122

在spingMvc配置文件中配置文件上传解析器

<!-- 文件上传解析器 --><bean class="org.springframework.monsMultipartResolver" id="multipartResolver"><!-- 设置最大上传文件大小 --><property name="maxUploadSize" value="20971520"/><!-- 设置默认编码字符集 --><property name="defaultEncoding" value="UTF-8"/></bean>

3.加载配置文件

<context:property-placeholder location="classpath:application.properties"/>

二.实现代码

1.前端

Augularjs代码:

/** 定义文件异步上传的方法 */$scope.uploadFile = function () {// 创建表单数据对象var formData = new FormData();// 第一个参数：请求参数名称// 第二个参数：取html页面中第一个file元素// 表单数据对象追加上传的文件formData.append("file", file.files[0]);// 发送异步请求$http({method: 'post', // 请求方式url: '/upload', // 请求URLdata: formData, // 表单数据对象headers: {"Content-Type": undefined}, // 设置请求头transFormRequest: angular.identity // 转换表单请求(把文件转化成字节)}).then(//成功回调方法function (response) {//验证是否上传成功if(response.data.status=200){//将上传成功后返回的图片路径,返回到前端页面$scope.entity.pic=response.data.url;}})};

前端页面代码:

<table><tr><td><!-- 需要上传的文件 --><input id="file" type="file"/><button class="btn btn-primary" type="button" <!-- 激活上传的方法 -->ng-click="uploadFile()">上传</button></td><td><!-- 上传成功后显示图片 --><img height="100px" src="{{entity.pic}}"width="200px"></td></tr></table>

2.后台控制器

import java.util.Map;/*** @ClassName upLoadFileController* @Description TODO* @Author lilei* @Date 05/04/ 22:57* @Version 1.0**/@RequestMapping//生成bean加入sping容器,并将返回的对象转化为json格式,组合注解@RestControllerpublic class UpLoadFileController {//注入配置文件中DFS主机ip地址@Value("${fileServerUrl}")private String fileServerUrl;@PostMapping("/upload")public Map<String,Object> upload(@RequestParam("file") MultipartFile multipartFile){Map<String,Object> map =new HashMap<>();map.put("status","500");try {//加载DFS服务器地址String path = this.getClass().getResource("/fastdfs_client.conf").getPath();//初始化追踪服务器,与储存服务器ClientGlobal.init(path);//获得储存服务器客户端StorageClient client = new StorageClient();//获得图片真实名称String originalFilename = multipartFile.getOriginalFilename();//上传图片到存储服务器String[] uploadFile = client.upload_file(multipartFile.getBytes(), FilenameUtils.getExtension(originalFilename), null);StringBuilder url = new StringBuilder(fileServerUrl);//拼接生成可访问的图片地址for (String s : uploadFile) {stringBuilder.append("/"+s);}//将数据加入map集合,用于返回map.put("url",url.toString());map.put("status",200);} catch (Exception e) {e.printStackTrace();}//返回map给前端解析return map;}}