文件的上傳和預覽在web開發領域是隨處可見,存儲的方式有很多,本文采用阿里巴巴余慶大神開發的FastDFS進行文件的存儲,FastDFS是一個分布式文件存儲系統,可以看我上一篇博文,有安裝和配置教程。
本文后台采用SpringBoot,前端采用Vue.js和Element UI,存儲引擎為FastDFS。
步驟:
1.maven項目引入FastDFS依賴
1 <dependency> 2 <groupId>com.github.tobato</groupId> 3 <artifactId>fastdfs-client</artifactId> 4 <version>1.26.7</version> 5 </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那個時縮略圖