1. fastDFS is a distributed file system, mainly used to store and manage large binary files, such as pictures, audio and video.
1. Tracker Server (Tracker Server): It is the server program of FastDFS, which is used to coordinate the operation of storing and accessing files, and is responsible for managing the address information of the Storage Server (Storage Server) and judging the availability of the Storage Server.
2. Storage Server (Storage Server): The server used to store and manage files is actually a storage node.
3. Group (Group): refers to the grouping of storage servers. After uploading files, they will be assigned to a server under this group for storage.
4. FastDFS Client (FastDFS Client): An application component used to upload, download and delete files, usually implemented through the FastDFS client API.
5. Storage Path (Storage Path): A globally unique identifier composed of Group and file name, used to access files stored on FastDFS.
6. Tracker Path (Tracker Path): A globally unique identifier composed of the IP and port number of the Group and Storage Server, used to access the Tracker server.
7. Meta data: refers to metadata used to describe file attributes, usually used to supplement file description, classification, statistics, distinction and retrieval, etc. FastDFS supports storage of custom metadata, and supports query and modification.
2. The principle and implementation process of fastDfs
1. When a user uploads a picture, the client will connect to the trackeServer, and the trackeServer will call an available StorageServer, and return the ip and port of the StorageServer.
2. The client will access the StorageServer according to the ip and prot, pass the resources to the StorageServer, and then generate a filed response to the filed and file path.
3. TrackeServer and StorageServer must maintain a heartbeat mechanism, so that trackeServer knows which StorageServer is available.
3. SpringBoot integrates fastDfs image upload technology
1. Introduce FastDFS client dependencies: Introduce related dependencies of FastDFS clients in pom.xml
<!--fastdfs-->
<dependency>
<groupId>cn.bestwu</groupId>
<artifactId>fastdfs-client-java</artifactId>
<version>1.27</version>
</dependency>
2. Use the tool class of fastDfs
package com.lzc.basic.utils;
import org.csource.common.NameValuePair;
import org.csource.fastdfs.*;
/**
* fastDfs tool class
*/
public class FastDfsUtils { // from classpath: the content in resources finally Will compile to public static String CONF_FILENAME = FastDfsUtils.class.getClassLoader() .getResource("fdfs_client.conf").getFile(); /** * upload file * @param file * @param extName * @return */ public static String upload(byte[] file,String extName) { try { ClientGlobal.init(CONF_FILENAME); TrackerClient tracker = new TrackerClient(); TrackerServer trackerServer = tracker.getConnection();
StorageServer storageServer = null;
StorageClient storageClient = new StorageClient(trackerServer, storageServer);
NameValuePair nvp [] = new NameValuePair[]{ new NameValuePair("age", "18"), new NameValuePair("sex", "male") }; String fileIds[] = storageClient.upload_file(file,extName,nvp); System.out.println(fileIds.length); System.out.println("组名：" + fileIds[0]); System.out.println("路径: " + fileIds[1]); return "/"+fileIds[0]+"/"+fileIds[1]; } catch (Exception e) { e.printStackTrace(); */* @return* @param extName* upload file/**}}return null;
public static String upload(String path,String extName) {
try {
ClientGlobal.init(CONF_FILENAME);
TrackerClient tracker = new TrackerClient();
TrackerServer trackerServer = tracker.getConnection();
StorageServer storageServer = null;
StorageClient storageClient = new StorageClient(trackerServer, storageServer);
String fileIds[] = storageClient.upload_file(path, extName,null);
System.out.println(fileIds.length);
System.out.println("组名：" + fileIds[0]);
System.out.println("路径: " + fileIds[1]);
return "/"+fileIds[0]+"/"+fileIds[1];
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 下载文件
* @param groupName
* @param fileName
* @return
*/
public static byte[] download(String groupName,String fileName) {
try {
ClientGlobal.init(CONF_FILENAME);
TrackerClient tracker = new TrackerClient();
TrackerServer trackerServer = tracker.getConnection();
StorageServer storageServer = null;
StorageClient storageClient = new StorageClient(trackerServer, storageServer);
byte[] b = storageClient.download_file(groupName, fileName);
return b;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 删除文件
* @param groupName
* @param fileName
*/
public static void delete(String groupName,String fileName){
try {
ClientGlobal.init(CONF_FILENAME);
TrackerClient tracker = new TrackerClient();
TrackerServer trackerServer = tracker.getConnection();
StorageServer storageServer = null;
StorageClient storageClient = new StorageClient(trackerServer, storageServer);
int i = storageClient.delete_file(groupName,fileName);
System.out.println( i==0 ? "删除成功" : "删除失败:"+i);
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException("删除异常,"+e.getMessage());
}
}
// public static void main(String[] args) {
// FastDfsUtils.delete("group1","M00/00/0F/oYYBAGJ6IGaAWQeOAAbMJw3URKE510.gif");
// }
}
3. Backend interface
package com.lzc.basic.controller;
import com.lzc.basic.exception.GlobalExceptionEnum;
import com.lzc.basic.utils.AjaxResult;
import com.lzc.basic.utils.FastDfsUtils;
import org.apache.commons.io .FilenameUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
/**
* upload
* download = not required
* view = path
* delete
* Update = delete + upload
*/
@RestController
@RequestMapping("/fastDfs")
public class FastDfsController { //@RequestPart handles complex form items, the default name="file", which is consistent with the name attribute value of the uploaded file @PostMapping
public AjaxResult upload(@RequestPart(required = true,value = "file") MultipartFile file){ try { System.out.println(file.getOriginalFilename() + ":" + file.getSize()); // 1. Get the byte array of the file from file.getBytes() in the complex object getOriginalFilename() Get the original name String originalFilename = file.getOriginalFilename(); // 2.FilenameUtils.getExtension(originalFilename); Get the file extension name String extName = FilenameUtils. getExtension(originalFilename); // xxx.jpg // String extName = originalFilename.substring(originalFilename.lastIndexOf(".")+1); String filePath = FastDfsUtils.upload(file.getBytes(), extName); return AjaxResult. success(filePath);//Return the uploaded path } catch (IOException e) { e.printStackTrace();
return AjaxResult.error(GlobalExceptionEnum.UPLOAD_ERROR.getCode(),GlobalExceptionEnum.UPLOAD_ERROR.getMessage());
}
}
/**
* Parameter: full path /goup1/xxxxx/yyyy
* Return value: success or not, and return address
* //The analog front-end sends a request to call this interface 1: Delete http://localhost:8080/fastDfs//group1/M00/04/72/CgAIC2QetIuAVFPIAAgFDuhQH8Q183.gif - no //The analog front-end sends a request to call this interface 2:
Delete http ://localhost:8080/fastDfs?path=/group1/M00/04/72/CgAIC2QetIuAVFPIAAgFDuhQH8Q183.gif - using
*/
@DeleteMapping()
public AjaxResult del(@RequestParam(required = true, value = "path") String path ){ String pathTmp = path.substring(1); // goup1/xxxxx/yyyy String groupName = pathTmp.substring(0, pathTmp.indexOf("/")); //goup1
String remotePath = pathTmp.substring(pathTmp.indexOf("/")+1);// /xxxxx/yyyy
FastDfsUtils.delete(groupName, remotePath);
return AjaxResult.success(path);
}
}
4. Front-end vue and elementui
1. Introduce elementui component
<el-form-item label="resources" prop="resources">
<!--<el-input v-model="editForm.resources" auto-complete="off"></el-input>-- >
<el-upload
class="upload-demo"
action="http://localhost:8080/fastDfs"
:on-remove="handleRemove"
:on-success="handleSuccess"
:file-list="fileList"
list -type="picture">
<el-button size="small" type="primary">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">Only upload jpg/ png file, and no more than 500kb</div>
</el-upload>
</el-form-item>
2. How to upload and delete pictures
handleSuccess(response, file, fileList) { //1. As long as the action attribute is written correctly, it can be uploaded //Processing resources if(this.editForm.resources){//There is a value this.editForm.resources = this.editForm .resources+","+response.data; }else{ this.editForm.resources = response.data; } //Process fileList:resources = xx,xx,xx this.fileList=[];//Empty first - then add The latest pictures of all the pets if(this.editForm.resources){ let arr = this.editForm.resources.split(",");//[xx,xx,xx] for(var i = 0;i<arr .length;i++){ this.fileList.push({"url":"Remote registered address"+arr[i]}); } } } ,
handleRemove(file, fileList) { //1. Call the delete interface to delete the data in fastdfs: var url = file.url;// var path = url.substring(url.indexOf("/group"));// / group1/M00/00/0C/CgAIC2KrU4qAAy6HAAF5fdD2FCI828.jpg this.$http.delete("/fastDfs?path="+path).then(res=>{ if(res.data.success){ this.$message.success ("Delete successfully!!!"); }else{ this.$message.success("Delete failed!!!"); } }) //2. Process resources if(this.editForm.resources){ // xx ,yy,zz let arr = this.editForm.resources.split(","); //[xx,yy,zz] for(var i = 0;i<arr.length;i++){ if(path == arr[i]){//found the deleted picture arr.splice(i,1); break; } } //[xx,zz]
this.editForm.resources = arr.join(","); //xx,zz
console.log(this.editForm.resources)
}
//3. Processing fileList
this.fileList=[];//Empty first - then Add latest
if(this.editForm.resources){ let arr = this.editForm.resources.split(","); //[xx,xx,xx] for(var i = 0;i<arr.length; i++){ this.fileList.push({"url":"Remote registered address"+arr[i]}); } } },