springBoot实现文件上传+预览 与 FastDFS分布式文件系统

1、springBoot的文件上传（表单提交）

前端页面：

 				<form action=""
                              method="post"
                              class="form form-horizontal"
                              enctype="multipart/form-data"
                              id="form-user-add" style="width: 300px;height: 500px;margin:300px auto">
                            <div class="form-group">
                                <img src="" id="img0" style="width: 20rem;height: 15rem;">
                                <input type="file" name="file0" id="file0" multiple="multiple"/>
                                <label for="file0" class='btn btn-success'>上传图片</label>
                            </div>
                            <div class="form-group">
                                <label for="tInfo">备注</label>
                                <input type="text" class="form-control" id="tInfo" placeholder="请输入备注">
                            </div>
                    <button id="aa" type="submit" class="btn btn-primary">提交</button>
                    </form>
<script type="text/javascript">
    $("#img0").attr("src", " /images/111111.png");//上传框初始化一个图片
    $("#file0").change(function () {
        var objUrl = getObjectURL(this.files[0]);//获取文件信息
        console.log("objUrl = " + objUrl);
        if (objUrl) {
            $("#img0").attr("src", objUrl);
        }
    });

    function getObjectURL(file) {
        console.log(">>>" + file);
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    $("#aa").on("click", function () {
        var formData = new FormData();
        formData.append('file', $('#file0')[0].files[0]);
        formData.append('tInfo', $('#tInfo').val());
        $.ajax({
            type: 'post',
            dataType: 'json',
            data: formData,
            cache: false, //上传文件不需要缓存
            url: '/upload/add',
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                if (data.success == 'ok') {
                    $.messager.alert('提示', '添加数据成功！');
                    window.location.reload();
                } else {
                    $.messager.alert('提示', '添加数据失败！');
                }
            }
        })

    })

</script>

java代码：
控制层： 上传图片到target目录下的target/classes/src/main/resources/文件下

 @ResponseBody
    @RequestMapping("add")
    public String add(@RequestParam MultipartFile file, String tInfo) throws FileNotFoundException {
    //上传图片到images
        String staticPath= ResourceUtils.getURL("classpath:").getPath() + "static";
        System.out.println(">>>>>"+staticPath);
        //获取文件名
        String fileName = file.getOriginalFilename();
        //获取图片的后缀名
        String suffixName=fileName.substring(fileName.lastIndexOf("."));
        // 新文件名
        fileName = UuidUtils.getOneUuid()+suffixName;
        // 图片存储目录及图片名称
        String url_path = "images" + File.separator + fileName;
        //图片保存路径
        String savePath = staticPath + File.separator + url_path;
        //上传到本地
        String savePath1=savePath.replace("target/classes/","src/main/resources/");
        System.out.println("图片保存地址："+savePath);
        // 访问路径=静态资源路径+文件目录路径
        String visitPath ="static/" + url_path;
        System.out.println("图片访问uri："+visitPath);
        File saveFile2 = new File(savePath1);
        if (!saveFile2.exists()){
            saveFile2.mkdirs();
        }
        try {
            file.transferTo(saveFile2);
           /* file.transferTo(saveFile); */ //将临时存储的文件移动到真实存储路径下
        } catch (IOException e) {
            e.printStackTrace();
        }
        visitPath=visitPath.replace("static/","");
        //添加新的服药记录
        this.uploadService.add(visitPath,tInfo);

    return  null;
    }

图片只是上传target目录下 没有做实时更新

/*
* 图片实时更新   将文件更新到本地的项目resources/static\images下
* */
@Configuration
public class ResourceConfigAdapter extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        if(!registry.hasMappingForPattern("/static/**")){
            registry.addResourceHandler("/images/**").addResourceLocations("file:F:\\JAVA\\medicine\\src\\main\\resources\\static\\images\\"); /*绝对路径*/
        }
        super.addResourceHandlers(registry);
    }

}

2、FastDFS（分布式文件系统）

1、什么是分布式文件系统

分布式文件系统（Distributed File System）是指文件系统管理的物理存储资源不一定直接连接在本地节点上，而是通过计算机网络与节点相连。
通俗来讲：

• 传统文件系统管理的文件就存储在本机。
• 分布式文件系统管理的文件存储在很多机器，这些机器通过网络连接，要被统一管理。无论是上传或者访问文件，都需要通过管理中心来访问

安装

需要安装一台centos7 + nginx环境配置好的虚拟机
更换到root用户

su root

创建一个文件夹

mkdir /opt/module

赋予权限

chmod 777 /opt/module
cd /opt/module

创建一个文件夹

mkdir fdfs
cd /opt/module/fdfs

将这三个文件上传到该目录下

fastdfs-nginx-module_v1.16.tar.gz
FastDFS_v5.08.tar.gz
libfastcommon-master.zip

安装libfastcommon-master

cd /opt/module/fdfs
unzip libfastcommon-master.zip
yum install -y unzip
cd libfastcommon-master
./make.sh && ./make.sh install

安装FastDFS

cd …
tar -zxvf FastDFS_v5.08.tar.gz
cd FastDFS
yum -y install zlib zlib-devel pcre pcre-devel gcc gcc-c++ openssl openssl-devel libevent libevent-devel perl unzip net-tools wget
./make.sh clean
./make.sh && ./make.sh install

查看启动脚本

ll /etc/init.d/ | grep fdfs
cd /etc/fdfs
mv tracker.conf.sample tracker.conf
mkdir -p /opt/module/tracker
vi tracker.conf

base_path=/opt/module/tracker

service fdfs_trackerd start
ps -ef | grep fdfs
chkconfig fdfs_trackerd on

mv storage.conf.sample storage.conf
vi storage.conf
base_path=/opt/module/storage
store_path0=/opt/module/storage
tracker_server=【虚拟机地址】:22122

mkdir -p /opt/module/storage
service fdfs_storaged start
ps -ef | grep fdfs
chkconfig fdfs_storaged on

测试是否安装成功

ll
mv client.conf.sample client.conf
vi client.conf
base_path=/opt/module/fastdfs
tracker_server=]【虚拟机地址】:22122
mkdir -p /opt/module/fastdfs

另起一bigdata
向/opt/module/fastdfs添加一个文件

cd /opt/module/fastdfs
rz a.jpg
cd /etc/fdfs
/usr/bin/fdfs_upload_file client.conf /opt/module/fastdfs/a.png
cd /opt/module/storage/data
cd 00
cd 00

2.fastdfs和nginx集成，fastdfs-nginx-module安装

cd /usr/local/nginx/sbin
nginx -s stop
cd /opt/module/fdfs
tar -zxvf fastdfs-nginx-module_v1.16.tar.gz
ll
cd fastdfs-nginx-module
ll
cd src
vi config

去掉三个local

:wq
cp mod_fastdfs.conf /etc/fdfs/
cd /etc/fdfs/
vi mod_fastdfs.conf
connect_timeout=10
tracker_server=【虚拟机地址】:22122
url_have_group_name = true
store_path0=/opt/module/storage
:wq
cd /opt/module/fdfs/FastDFS
ll
cd conf
cp http.conf mime.types /etc/fdfs
cd /etc/fdfs

3.修改nginx

cd /root/nginx-1.14.2
./configure --prefix=/usr/local/nginx --add-module=/opt/module/fdfs/fastdfs-nginx-module/src
make （编译）
cp /root/nginx-1.14.2/objs/nginx /usr/local/nginx/sbin/（替换）

选择y

修改windows中hosts

【虚拟机地址】 image.leyou.com

cd /usr/local/nginx/conf
vi nginx.conf

 user root;
  server {
        listen       80;
        server_name  image.leyou.com;
        # 监听域名中带有group的，交给FastDFS模块处理
        location ~/group([0-9])/ {
              ngx_fastdfs_module;
        }

        location / {
              root   html;
              index  index.html index.htm;
        }
  
        error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
        }
    }

修改完之后 重启nginx

./nginx

http://image.leyou.com/group1/M00/00/00/wKjkoVwdTiWAa47iAAB4bZda-ZY771.jpg