分布式FastDFS之品优购商品图片上传开发笔记

项目：品优购
需求：新增商品上传图片模块

业务实现效果：

可以看到，上传的图片详细地址，ip为分布式FastDFS的地址。

什么是分布式文件服务器FastDFS?

– FastDFS 是用 c 语言编写的一款开源的分布式文件系统。FastDFS 为互联网量身定制，
充分考虑了冗余备份、负载均衡、线性扩容等机制，并注重高可用、高性能等指标，使用
FastDFS 很容易搭建一套高性能的文件服务器集群提供文件上传、下载等服务。
– FastDFS 架构包括 Tracker server 和 Storage server。客户端请求 Tracker server 进行文
件上传、下载，通过 Tracker server 调度最终由 Storage server 完成文件上传和下载。
Tracker server 作用是负载均衡和调度，通过 Tracker server 在文件上传时可以根据一些
策略找到 Storage server 提供文件上传服务。可以将 tracker 称为追踪服务器或调度服务
器。
Storage server 作用是文件存储，客户端上传的文件最终存储在 Storage 服务器上，
Storageserver 没有实现自己的文件系统而是利用操作系统 的文件系统来管理文件。可以将
storage 称为存储服务器。

服务端两个角色：

Tracker：管理集群，tracker 也可以实现集群。每个 tracker 节点地位平等。收集 Storage
集群的状态。
Storage：实际保存文件 Storage 分为多个组，每个组之间保存的文件是不同的。每
个组内部可以有多个成员，组成员内部保存的内容是一样的，组成员的地位是一致的，没有
主从的概念。

文件上传流程

文件下载流程

品优购商品图片上传

需求分析：

1. 在商品录入界面实现多图片上传
2. 当用户点击新建按钮，弹出上传窗口
3. 点击上传，上传成功，窗口显示图片，失败，弹窗提示上传失败
   
4. 点击保存，商品图片列表显示图片，实现多图显示
5. 点击删除，可将图片显示列表的图片删除

导入文件上传依赖

org.csource.fastdfs
fastdfs


commons-fileupload
commons-fileupload
 

新建工具类

package util;

import org.csource.common.NameValuePair;
import org.csource.fastdfs.*;

public class FastDFSClient {
    private TrackerClient trackerClient = null;
    private TrackerServer trackerServer = null;
    private StorageServer storageServer = null;
    private StorageClient1 storageClient = null;

    public FastDFSClient(String conf) throws Exception {
        if (conf.contains("classpath:")) {
            conf = conf.replace("classpath:", this.getClass().getResource("/").getPath());
        }
        ClientGlobal.init(conf);
        trackerClient = new TrackerClient();
        trackerServer = trackerClient.getConnection();
        storageServer = null;
        storageClient = new StorageClient1(trackerServer, storageServer);
    }

    /**
     * 上传文件方法
     * 
Title: uploadFile
     * 
Description: 
     * @param fileName 文件全路径
     * @param extName 文件扩展名，不包含（.）
     * @param metas 文件扩展信息
     * @return
     * @throws Exception
     */
    public String uploadFile(String fileName, String extName, NameValuePair[] metas) throws Exception {
        String result = storageClient.upload_file1(fileName, extName, metas);
        return result;
    }

    public String uploadFile(String fileName) throws Exception {
        return uploadFile(fileName, null, null);
    }

    public String uploadFile(String fileName, String extName) throws Exception {
        return uploadFile(fileName, extName, null);
    }

    /**
     * 上传文件方法
     * 
Title: uploadFile
     * 
Description: 
     * @param fileContent 文件的内容，字节数组
     * @param extName 文件扩展名
     * @param metas 文件扩展信息
     * @return
     * @throws Exception
     */
    public String uploadFile(byte[] fileContent, String extName, NameValuePair[] metas) throws Exception {

        String result = storageClient.upload_file1(fileContent, extName, metas);
        return result;
    }

    public String uploadFile(byte[] fileContent) throws Exception {
        return uploadFile(fileContent, null, null);
    }

    public String uploadFile(byte[] fileContent, String extName) throws Exception {
        return uploadFile(fileContent, extName, null);
    }
}

在application.properties中添加以下信息

FILE_SERVER_URL=http://192.168.25.133/

在springmvc.xml文件中添加以下配置

控制层新建新建 UploadController.java

package com.pinyougou.shop.controller;

import entity.Result;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import util.FastDFSClient;

@RestController
public class UploadController {

    @Value("${FILE_SERVER_URL}")
    private String FILE_SERVER_URL;//文件服务器地址

    @RequestMapping("/upload")
    public Result upload(MultipartFile file) {
        //1、取文件的扩展名
        String originalFilename = file.getOriginalFilename();
        String extName = originalFilename.substring(originalFilename.lastIndexOf(".")
                + 1);
        try {
            //2、创建一个 FastDFS 的客户端
            FastDFSClient fastDFSClient= new FastDFSClient("classpath:config/fdfs_client.conf");
            //3、执行上传处理
            String path = fastDFSClient.uploadFile(file.getBytes(), extName);
            //4、拼接返回的 url 和 ip 地址，拼装成完整的 url
            String url = FILE_SERVER_URL + path;
            return new Result(true, url);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "上传失败");
        }
    }
}

新建 uploadService.js

/**
 * 文件上传服务层
 * anjularjs 对于 post 和 get 请求默认的 Content-Type header 是 application/json。
 * 通过设置‘Content-Type’: undefined，
 * 这样浏览器会帮我们把 Content-Type 设置为 multipart/form-data.
 */
app.service("uploadService",function($http){
    //上传文件
    this.uploadFile=function(){
        var formdata=new FormData();
        formdata.append('file',file.files[0]);//file 文件上传框的name
        return $http({
            url:'../upload.do',
            method:'post',
            data:formdata,
            headers:{ 'Content-Type':undefined },
            transformRequest: angular.identity
        });

    }
});

将 uploadService 服务注入到 goodsController 中

 //控制层 
app.controller('goodsController' ,function($scope,$controller,goodsService,uploadService){

在 goods_edit.html 引入 js

goodsController 编写上传文件代码

//上传图片
    $scope.uploadFile=function(){
        uploadService.uploadFile().success(
            function(response){
                if(response.success){
                    $scope.image_entity.url= response.message;
                }else{
                    alert(response.message);
                }
            }
        );
    }

修改前端页面代码

		      	

		      		
颜色
		      		
  
		      	
			    
		      	

		      		
商品图片
		      		

						

							

								

												                
					                
				                   		上传
					                	
					            
								

									
								
							
						
						
		      		
		      	
		      	
			 

修改新建按钮，添加ng-click=“image_entity={}”,

 新 建

在 goodsController.js 增加方法

/**
	 * 定义页面实体结构
     * @type {{goods: {}, goodsDesc: {itemImages: Array}}}
     */
    $scope.entity={goods:{},goodsDesc:{itemImages:[]}};

    /**
	 * 添加图片列表
     */
    $scope.add_image_entity=function () {
		$scope.entity.goodsDesc.itemImages.push($scope.image_entity);
    }

修改上传窗口的保存按钮,添加ng-click

保存

遍历图片列表

		 					                           
			
				{{pojo.color}}
			 
			
				
			
			   删除
		
 

移除图片,在 goodsController.js 增加代码

/**
	 * 删除图片
     * @param index
     */
    $scope.remove_image_entity=function (index) {
		$scope.entity.goodsDesc.itemImages.splice(index,1);
    }

修改列表中的删除按钮,添加ng-click

 删除

至此，功能基本完成：
点击新建上传

点击保存，出现在图片显示列表上

点击删除：

注：这里的删除仅仅只是将图片列表中的图片删除显示，但FastDFS服务器上依然存在，这样就形成了无用的垃圾文件，可以给FastDFS设置定时清理垃圾，不做介绍。