项目:品优购
需求:新增商品上传图片模块
可以看到,上传的图片详细地址,ip为分布式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 分为多个组,每个组之间保存的文件是不同的。每
个组内部可以有多个成员,组成员内部保存的内容是一样的,组成员的地位是一致的,没有
主从的概念。
需求分析:
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);
}
}
FILE_SERVER_URL=http://192.168.25.133/
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, "上传失败");
}
}
}
/**
* 文件上传服务层
* 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
});
}
});
//控制层
app.controller('goodsController' ,function($scope,$controller,goodsService,uploadService){
//上传图片
$scope.uploadFile=function(){
uploadService.uploadFile().success(
function(response){
if(response.success){
$scope.image_entity.url= response.message;
}else{
alert(response.message);
}
}
);
}
颜色
商品图片
/**
* 定义页面实体结构
* @type {{goods: {}, goodsDesc: {itemImages: Array}}}
*/
$scope.entity={goods:{},goodsDesc:{itemImages:[]}};
/**
* 添加图片列表
*/
$scope.add_image_entity=function () {
$scope.entity.goodsDesc.itemImages.push($scope.image_entity);
}
{{pojo.color}}
/**
* 删除图片
* @param index
*/
$scope.remove_image_entity=function (index) {
$scope.entity.goodsDesc.itemImages.splice(index,1);
}
注:这里的删除仅仅只是将图片列表中的图片删除显示,但FastDFS服务器上依然存在,这样就形成了无用的垃圾文件,可以给FastDFS设置定时清理垃圾,不做介绍。