如何用分布式服务器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.web.multipart.commons.CommonsMultipartResolver" 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', // 请求URL
                data: 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/2019 22:57
 * @Version 1.0
 **/
 
@RequestMapping
//生成bean加入sping容器,并将返回的对象转化为json格式,组合注解
@RestController
public 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;
    }
}