Bootstrap fileinput上传图片到fastdfs

参考链接：
https://github.com/kartik-v/bootstrap-fileinput
http://www.cnblogs.com/landeanfen/p/5007400.html

前面大神已经把过程写得很清楚了，但我还是把我实践的过程记录一下。

1、引入Bootstrap fileinput

1.1 引入必要css、js

附：Bootstrap、jQuery、Bootstrap fileinput 下载地址。

1.2 html/js

界面效果：

2 向fastdfs上传文件

2.1 引入fastdfs client依赖

 
 
      net.oschina.zcx7878
      fastdfs-client-java
      1.27.0.0
  

2.2 编写后端接口

    @PostMapping("/uploadPic")
    @ResponseBody
    public R uploadPic(HttpServletRequest request, HttpServletResponse response,@RequestParam("files") MultipartFile[] files) throws Exception {
        ClientGlobal.init("fdfs_client.conf");

        //创建一个tracker客户端对象
        TrackerClient trackerClient = new TrackerClient();

        //使用trackerclient连接trackersever对象
        TrackerServer trackerServer = trackerClient.getConnection();

        //创建一个straged server对象
        StorageServer storageServer = null;

        //创建一个storage client 对象
        StorageClient storageClient = new StorageClient(trackerServer, storageServer);

        //利用storageclient对象上传图片
        //参数一为文件所在的路径（不要有中文）
        //参数二为文件的拓展名
        //参数三为文件扩展信息
        MultipartFile attach  = files[0];
        String ext = attach.getOriginalFilename().substring(attach.getOriginalFilename().lastIndexOf(".")+1);
        NameValuePair[] meta_list = new NameValuePair[4];
        meta_list[0] = new NameValuePair("fileName", attach.getOriginalFilename());
        meta_list[1] = new NameValuePair("fileLength", String.valueOf(attach.getSize()));
        meta_list[2] = new NameValuePair("fileExt", ext);
        meta_list[3] = new NameValuePair("fileAuthor", "");
        String[] upload_file = storageClient.upload_file(attach.getBytes(), ext, meta_list);

        //upload_file 存储着访问路径
        for(String s : upload_file){
            System.out.println(s);
        }
        return R.ok();
    }

fdfs_client.conf 的配置（放在classpanth路径下）

tracker_server=192.168.0.1:22122		   //配置安装fastdfs-tracker的服务器ip及端口

上传成功：

控制台输出：

可以直接通过浏览器访问上传的图片：

后续再添加上传视频，删除图片、视频等功能~