文件的上传和预览在web开发领域是随处可见,存储的方式有很多,本文采用阿里巴巴余庆大神开发的FastDFS进行文件的存储,FastDFS是一个分布式文件存储系统,可以看我上一篇博文,有安装和配置教程。

  本文后台采用SpringBoot,前端采用Vue.js和Element UI,存储引擎为FastDFS。

  步骤:

    1.maven项目引入FastDFS依赖

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

   2.配置yml

fdfs:
so-timeout: 1501 #socket连接超时时长
connect-timeout: 601 #连接tracker服务器超时时长
thumb-image: #缩略图的宽高,可选
width: 60
height: 60
tracker-list: ip地址:22122 #地址,支持多个(集群)

   3.编写配置类

package com.steak.system.common.config;
import com.github.tobato.fastdfs.FdfsClientConfig;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.EnableMBeanExport;F
import org.springframework.context.annotation.Import;
import org.springframework.jmx.support.RegistrationPolicy;
@Configuration
@Import(FdfsClientConfig.class)#导入FastDFS-Client组件
@EnableMBeanExport(registration = RegistrationPolicy.IGNORE_EXISTING) #解决jmx重复注册bean的问 public class FastClientImporter {
}

    4.Controller层对图片进行处理,本项目前端通过Base64位将图片传到后台,后台解析和转码后,再上传到服务器

    
    @Autowired
    private FastFileStorageClient storageClient; //注入操作fastdfs的接口

     String filePath = "D://images//"; #图片存放的路径,这里我写成D盘
String fileName = System.currentTimeMillis()+".jpg"; #文件名
BASE64Decoder decoder = new BASE64Decoder();
imgBase64 = imgBase64.replace("data:image/jpeg;base64,",""); #去除不需要的部分
StorePath storePath = null;
try {
byte[] bytes = decoder.decodeBuffer(imgBase64); //转为图片
for (int i = 0 ; i < bytes.length ; ++i){
if (bytes[i] < 0){
bytes[i] += 256;
}
}
String imageFilePath = filePath+fileName.replace("\\\\","/");
OutputStream out = new FileOutputStream(imageFilePath);
out.write(bytes);
out.flush();
out.close();
File file = new File(imageFilePath);
storePath = this.storageClient.uploadImageAndCrtThumbImage(new FileInputStream(file),file.length(),"jpg",null); //上传到FastDFS,这里也上传了缩略图,
  
    }catch (Exception e){
        e.printStackTrace();
  }
    String photoURL = serverPort+storePath.getFullPath();#将ip地址+端口+图片在FastDFS中的存储路径进行拼接就可以

    大概就是这个样子了,哈哈,美女漂亮

    对于FastDFS将图片存储在那:

      存储在/var/fdfs/data下,下面有很多很多目录,像00,FF啊这样的,因为才开始使用,所以我就从第一个目录的第一条一直往里面走,随后找到了图片,60x60那个时缩略图

SpringBoot整合FastDFS实现图片的上传的更多相关文章

  1. SpringBoot整合阿里云OSS文件上传、下载、查看、删除

    1. 开发前准备 1.1 前置知识 java基础以及SpringBoot简单基础知识即可. 1.2 环境参数 开发工具:IDEA 基础环境:Maven+JDK8 所用技术:SpringBoot.lom ...

  2. SpringBoot集成FastDFS依赖实现文件上传

    前言 对FastDFS文件系统安装后的使用. FastDFS的安装请参考这篇:Docker中搭建FastDFS文件系统(多图) 本文环境:IDEA + JDK1.8 + Maven 本文项目代码:ht ...

  3. springboot整合项目-商城个人头像上传功能

    上传头像的功能 持久层 1.sql语句的规划 avatar varchar(50) str - 字节流 将对象文件保存在操作系统上,然后在把这个文件的路径个记录下来,保存在avatar中,因为相比于字 ...

  4. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  5. 基于spring-boot的web应用,ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

  6. 【转载】【JAVA秒会技术之图片上传】基于Nginx及FastDFS,完成图片的上传及展示

    基于Nginx及FastDFS,完成商品图片的上传及展示 一.传统图片存储及展示方式 存在问题: 1)大并发量上传访问图片时,需要对web应用做负载均衡,但是会存在图片共享问题 2)web应用服务器的 ...

  7. springboot整合thumbnailator实现图片压缩

    springboot整合thumbnailator实现图片压缩 前言 最近由于首页产品列表图片显示太慢,经过研究发现是用户上传的图片太大. 针对这个问题,想到的解决方案是: 1. 产品上传时,限定图片 ...

  8. 第2-1-4章 SpringBoot整合FastDFS文件存储服务

    目录 5 SpringBoot整合 5.1 操作步骤 5.2 项目依赖 5.3 客户端开发 5.3.1 FastDFS配置 5.3.2 FastDFS配置类 5.3.3 文件工具类 5.3.4 文件上 ...

  9. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

随机推荐

  1. hw笔试题-02

    #include<stdio.h> #include<string.h> typedef struct { char *mem; char len; }m_table_t; i ...

  2. CSP-J&S2019前颓废记

    说了是颓废记,就是颓废记,因为真的很颓废...... 2018年12月 我看懂了<啊哈算法>(仅仅是看懂,并没有完全学会,只看得懂,却不会敲) 插曲:八上期末考试 我们老师阻挠我继续学OI ...

  3. 下载代码的时候 SSH与http的区别

    SSH: git@gitlab.alibaba-inc.com:damai-mz/mz-market.git HTTP:http://gitlab.alibaba-inc.com/damai-mz/m ...

  4. Windows编译运行webrtc全过程

    年纪大了,不想写什么开头.摘要,咱直接开始吧. 不过首先还是要感谢声网提供的webrtc国内源码镜像. 首先,编译webrtc你需要一台win10,而且必须得是一直在更新版本的.因为编译过程需要用到c ...

  5. Web端即时通讯基础知识补课:一文搞懂跨域的所有问题!

    本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...

  6. Disruptor系列(一)— disruptor介绍

    本文翻译自Disruptor在github上的wiki文章Introduction,原文可以看这里. 一.前言 作为程序猿大多数都有对技术的执着,想在这个方面有所提升.对于优秀的事物保持积极学习的心态 ...

  7. My time is limited

    Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - whic ...

  8. WPF 动态资源 DataContext="{DynamicResource studentListKey}" DisplayMemberPath="Name"

    public class StudentList:ObservableCollection<Student> { public List<Student> studentLis ...

  9. .NET 跨域问题解决

    后端处理:var callback=context.Request.QueryString["callback"].ToString(); context.Response.Wri ...

  10. jmeter实操及性能测试基础知识整理 - 不断更新

    主要基于jmetet工具 有任何疑问直接留言,可以相互讨论 线程组菜单: 线程数:并发数量Rame-Up时间(秒):多久跑完线程数,比如线程是10,Rame-Up时间是10秒,就是10秒内跑完10个线 ...