Vue+springmvc+mybatis前后端分离学习---(小功能)运用fastdfs实现图片上传以及前台展示

最近遇到一个问题，前端项目上传了一张图片通过后端的multipartFile来进行了保存，但当我前端的图片标签想要展示出这个图片的话他的src总不能是后端的项目路径或者让后端项目把图片存进前端项目的图片文件夹里，也更不能放到笔记本里诸如D:/xx/xx的路径，到时候虚拟机可没有这个路径，如何解决呢？

---

这时望向了手里的云服务器(哈哈哈，就你啦小兄弟)，通过在云服务器中配置Nginx以及fastdps来让我的服务器成为前后端两个项目存取资源的桥梁不就行啦。

ps:主要记录思路以及遇到的大问题，前几步的包括如何下载、配置请另行搜索，这样能够更加详细准确。

---

一、Nginx安装、配置(以能浏览器访问看到Nginx主页为准)

---

二、fastdps安装、配置

[注意点]

1.tracker.conf、storage.conf这两个文件的server_port所配置的端口号需要与Nginx监听的端口号一致。 2.storage中配置的tracker_server这里一定要是我们的服务器外网IP加上tracker.conf里配置的port项的端口号。

---

三、上传文件通过浏览器访问不到？

当上传文件后得到了文件地址，发现复制进浏览器地址栏返回的是nginx的404，这就需要我们在nginx中配置把对于storage组的访问映射到fastdfs的data目录里:

比如我上传图片后返回了如下路径: xx.xx.195.229/group1/M00/00/00/rBAAzV9RBL-ABm_HAAAtjPX_HTs449.jpg 那么我们就需要告诉nginx 这里的group1/M00就对应我们的fastdfs/file/data。

---

四、如何在img标签的src中使用上方返回的url?

为了测试，我在一个页面上只写了一个img标签，src直接赋死值url，发现有问题:

没有显示出图片，原因是因为浏览器自己会给地址栏加http://，但src没有就有问题，所以需要手动在src前添加，结果如图:

五、后台系统如何上传并获取

1.依赖：

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

2.接收前台图片的controller：

...请求映射自己改变 @ResponseBody public String uploadWord(@RequestParam String courseUrl, @RequestParam("file") MultipartFile multipartFile, HttpServletRequest request) throws IOException { if (null == multipartFile) { return "error"; } //获取文件流 InputStream inputStream=multipartFile.getInputStream(); byte[] file_buff = null; if(inputStream!=null){ int len1 = inputStream.available(); file_buff = new byte[len1]; inputStream.read(file_buff); } inputStream.close(); //上传文件并返回url String[] results= FastDFSUtils.upload(file_buff); //拼接访问地址 String fastPath = FastDFSClient.getUrl()+results[0]+ "/"+results[1]; return fastPath; }

3.上传工具类代码：

package com.cclx.utils; import org.csource.common.MyException; import org.csource.fastdfs.*; import org.springframework.core.io.ClassPathResource; import java.io.IOException; public class FastDFSUtils { public static String[] upload(byte[] fileBytes){ try { String filePath = new ClassPathResource("fdfs_client.conf").getFile().getAbsolutePath(); ClientGlobal.init(filePath);//初始化 TrackerClient trackerClient = new TrackerClient();//创建tracker TrackerServer trackerServer = trackerClient.getConnection();//获取tracker服务 StorageServer storageServer = null; StorageClient storageClient = new StorageClient(trackerServer,storageServer);//存储连接 String[] results = storageClient.upload_file(fileBytes,"jpg",null);//上传返回结果 for (String str : results){ System.out.println(str); } return results; } catch (IOException e) { e.printStackTrace(); } catch (MyException e) { e.printStackTrace(); } return null; } }

4.获取fastdfs文件存储路径的类

package com.cclx.utils; import org.csource.fastdfs.ClientGlobal; import org.csource.fastdfs.TrackerClient; import org.csource.fastdfs.TrackerServer; import java.io.IOException; public class FastDFSClient { //返回带端口号的图片服务器ip地址 public static String getTrackerUrl() throws IOException { return "http://"+getTrackerServer().getInetSocketAddress().getHostString()+":"+ ClientGlobal.getG_tracker_http_port()+"/"; } //返回不带端口号的图片服务其ip连接地址 public static String getUrl() throws IOException { return "http://"+getTrackerServer().getInetSocketAddress().getHostString()+"/"; } private static TrackerServer getTrackerServer() throws IOException { TrackerClient trackerClient = new TrackerClient(); TrackerServer trackerServer = trackerClient.getConnection(); return trackerServer; } }

5.配置信息文件

tracker_server = xx.xx.xxx.229:22122 //在你服务器的storage.conf里有这一项

记录结束 2020-09-04

---

“没什么难的，不要忘记呼吸”

第一章传送—>Spring与Mybatis单独配置运行记录 第二章传送—>Spring与Mybatis整合思路记录 第三章传送门—>前端搭建与跨域解决