Bootstrap fileinput上传图片到fastdfs

最新推荐文章于 2024-03-26 00:10:43 发布

周星星_9527

最新推荐文章于 2024-03-26 00:10:43 发布

阅读量1k

点赞数 1

文章标签：小插件

本文链接：https://blog.csdn.net/jsnhux/article/details/83387796

版权

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

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

1、引入Bootstrap fileinput

1.1 引入必要css、js

<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/fileinput.min.css" rel="stylesheet"/>

<!--jQuery必须放在第一个！-->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

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

1.2 html/js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap fileinput</title>
</head>
<body>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/fileinput.min.css" rel="stylesheet"/>

<!--jQuery必须放在第一个！-->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<input id="file-1" name="files" type="file" multiple="multiple" class="file" >
<script>
    // $("#file-1").fileinput("upload");
    // with plugin options
    $("#file-1").fileinput({
        enctype: 'multipart/form-data',
        theme: 'fa',
        uploadUrl: '/upload/uploadPic', // you must set a valid URL here else you will get an error
        // allowedFileExtensions: ['jpg', 'png', 'gif','video','flash'],
        overwriteInitial: false,
        maxFileSize: 0,
        // maxFilesNum: 10,
        // allowedFileTypes:['jpg', 'png', 'gif','video','flash'],
        // previewFileType:['video', 'flash'],
        showUpload:true,         //显示上传按钮
        showCancel:true,
        uploadAsync:false,       //设置为异步
        showPreview: true,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
</script>
</body>
</html>

界面效果：
bootstrap效果图

2 向fastdfs上传文件

2.1 引入fastdfs client依赖

 <!--fastdfs client-->
 <dependency>
      <groupId>net.oschina.zcx7878</groupId>
      <artifactId>fastdfs-client-java</artifactId>
      <version>1.27.0.0</version>
  </dependency>

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及端口

上传成功：
在这里插入图片描述

控制台输出：
在这里插入图片描述
可以直接通过浏览器访问上传的图片：

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

周星星_9527

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap fileinput上传图片到fastdfs

参考链接：https://github.com/kartik-v/bootstrap-fileinputhttp://www.cnblogs.com/landeanfen/p/5007400.html前面大神已经把过程写得很清楚了，但我还是把我实践的过程记录一下。1、引入Bootstrap fileinput1.1 引入必要css、js&amp;lt;link href=&quot;/css/boo...
复制链接

扫一扫