springboot整合fastdfs

1、新建一个springboot项目,添加依赖

<dependency>																									
			<groupId>com.github.tobato</groupId>																						
			<artifactId>fastdfs-client</artifactId>																						
			<version>1.25.2-RELEASE</version>																						
</dependency>																							

2、修改配置

# 上传文件总的最大值																						
spring.servlet.multipart.max-request-size=10MB																						
# 单个文件的最大值																						
spring.servlet.multipart.max-file-size=10MB	

fdfs.soTimeout=1500																							
fdfs.connectTimeout=600																							
fdfs.thumbImage.width=150																							
fdfs.thumbImage.height=150																							
fdfs.trackerList[0]=192.168.25.133:22122  #文件服务器的位置
fdfs.prefixpath=http://192.168.25.133/		#自定义配置																			
																					
																						
																					

3、启动类上加上

@Import(FdfsClientConfig.class)																																								
// 解决jmx重复注册bean的问题																																								
@EnableMBeanExport(registration = RegistrationPolicy.IGNORE_EXISTING)																																								

4、编写controller

@RestController
@CrossOrigin("*")
public class FileUploadController {

    @Autowired
    private FastFileStorageClient client;
    @Value("${fdfs.prefixpath}")
    private String prefixpath;

    @PostMapping("/upload")
    public AppResult upload(MultipartFile myfile){
        //1 获得扩张名
        String exname = myfile.getOriginalFilename().substring(myfile.getOriginalFilename().lastIndexOf(".")+1);
        // 1 上传文件的io
        // 2 文件的大小
        // 4 文件其他信息
        // 返回 保存的路径(对象)
        StorePath storePath = null;

        AppResult result = null;
        try {
            storePath = client.uploadFile(myfile.getInputStream(),
                    myfile.getSize(), exname,null);
            String url = prefixpath + storePath.getFullPath();
            result = new AppResult(true,200,"上传成功",url);
        } catch (IOException e) {
            e.printStackTrace();
            result = new AppResult(false,500,"上传失败",null);
        }
        //String url = prefixpath+storePath.getFullPath();
        // 就是在保存在fastdfs 上的路径
        // System.out.println(storePath.getFullPath());
        //return url;
        return result;
    }

}

5、编写前端

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#httpServletRequest.getContextPath()+'/'}">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ylp{
            visibility: hidden;
        }
    </style>
</head>
<body>
<h2>添加内容页面</h2>
<form method="post" id="upfrm" enctype="multipart/form-data">
    <p>
        图片:
        <input type="file" name="myfile"/>
        <input type="hidden" name="pic">
    </p>
    <p id="ylp" class="ylp">
        预览:
        <a href="" id="yla" target="_blank"><img src="" width="20px" height="20px" id="ylm"></a>
    </p>
</form>

</body>
<script th:src="@{/static/lib/jquery/jquery-1.8.3.min.js}"></script>
<script th:src="@{/static/lib/other/jquery-form.js}"></script>

<script>
   

    // 选择一个图片
    // 已选中一张图片马上就上传到服务器中
    $(":file[name='myfile']").on('change',function(event){
        // 获得文件的扩张名
        var fs = this.value.split(".");
        var ext = fs[fs.length-1];
        if(!(ext=='jpg'||ext=='png')){
            alert("请选中图片");
            return;
        }
        var $frm = $("#upfrm");
        //2 选中要提交的form
        var options = {
            url:'http://localhost:8070/upload',
            type:'post',
            success:function(jsondata){
                alert(jsondata.message);
                if(jsondata.keycode==200){
                    $("#ylp").removeClass("ylp");
                    $(":hidden[name='pic']").val(jsondata.data);
                    $("#ylm").prop("src",jsondata.data);
                    $("#yla").prop("href",jsondata.data);
                }
            }
        };
        $frm.ajaxSubmit(options);
    })

</script>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值