SpringBoot は fastDfs イメージ ファイルのアップロードを統合します

1. fastDFS は分散ファイル システムであり、主に画像、オーディオ、ビデオなどの大きなバイナリ ファイルを保存および管理するために使用されます。

       1. Tracker Server (Tracker Server): ファイルの保存とアクセスの操作を調整するために使用される FastDFS のサーバー プログラムであり、Storage Server (Storage Server) のアドレス情報の管理と可用性の判断を担当します。ストレージサーバーの。

       2. ストレージ サーバー (ストレージ サーバー): ファイルの保存と管理に使用されるサーバーは、実際にはストレージ ノードです。

       3. グループ (Group): ストレージ サーバーのグループを指し、ファイルをアップロードした後、ファイルはこのグループの下のサーバーに割り当てられて保存されます。

       4. FastDFS クライアント (FastDFS クライアント): ファイルのアップロード、ダウンロード、削除に使用されるアプリケーション コンポーネント。通常は FastDFS クライアント API を通じて実装されます。

       5. ストレージ パス (ストレージ パス): グループとファイル名で構成されるグローバルに一意の識別子。FastDFS に保存されているファイルにアクセスするために使用されます。

       6. トラッカー パス (トラッカー パス): トラッカー サーバーにアクセスするために使用される、グループおよびストレージ サーバーの IP とポート番号で構成されるグローバルに一意の識別子。

       7. メタデータ: ファイル属性を記述するために使用されるメタデータを指し、通常はファイルの説明、分類、統計、区別と検索などを補足するために使用されます。FastDFS はカスタム メタデータの保存をサポートし、クエリと変更をサポートします。

2. fastDFsの原理と実装プロセス

       1. ユーザーが写真をアップロードすると、クライアントは trackeServer に接続し、trackeServer は利用可能な StorageServer を呼び出し、StorageServer の IP とポートを返します。

       2. クライアントは、ip および prot に従って StorageServer にアクセスし、リソースを StorageServer に渡し、filed およびファイル パスへの filed 応答を生成します。

       3. TrackeServer と StorageServer は、どの StorageServer が使用可能であるかを trackeServer が認識できるように、ハートビート メカニズムを維持する必要があります。

3. SpringBoot は fastDfs 画像アップロード技術を統合します

1. FastDFS クライアントの依存関係を導入する: FastDFS クライアントの関連する依存関係を pom.xml に導入します。

<!--fastdfs-->
<依存関係>
<groupId>cn.bestwu</groupId>
<artifactId>fastdfs-client-java</artifactId>
<バージョン>1.27</version>
</dependency>

 2. fastDfs のツール クラスを使用する

package com.lzc.basic.utils;

import org.csource.common.NameValuePair;
import org.csource.fastdfs.*;
/**
* fastDfs ツール クラス
*/
public class FastDfsUtils { // クラスパスから: 最終的にリソース内のコンテンツpublic staticにコンパイルされますString CONF_FILENAME = FastDfsUtils.class.getClassLoader() .getResource("fdfs_client.conf").getFile(); /** * アップロード ファイル* @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 = null;

StorageClient storageClient = 新しい StorageClient(trackerServer, storageServer);
NameValuePair nvp [] = new NameValuePair[]{ new NameValuePair("年齢", "18"), new NameValuePair("性別", "男性") }; 文字列 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 (例外 e) { e.




















public static String Upload(String path,String extName) { try { ClientGlobal.init(CONF_FILENAME); TrackerClient トラッカー = new TrackerClient(); TrackerServer trackerServer = tracker.getConnection(); ストレージサーバー storageServer = null; StorageClient storageClient = 新しい 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 (例外 e) { e.printStackTrace(); null を返します。} } /**





















* ダウンロード文件
* @param groupName
* @param fileName
* @return
*/
public static byte[] download(String groupName,String fileName) { try { ClientGlobal.init(CONF_FILENAME); TrackerClient トラッカー = new TrackerClient(); TrackerServer trackerServer = tracker.getConnection(); ストレージサーバー storageServer = null; StorageClient storageClient = 新しい StorageClient(trackerServer, storageServer); byte[] b = storageClient.download_file(グループ名, ファイル名); bを返します。} catch (例外 e) { e.printStackTrace(); null を返します。} }

/**
* 删除文件
* @param groupName
* @param fileName
*/
public static void delete(String groupName,String fileName){ try { ClientGlobal.init(CONF_FILENAME); TrackerClient トラッカー = new TrackerClient(); TrackerServer trackerServer = tracker.getConnection(); ストレージサーバー storageServer = null; StorageClient storageClient = 新しい StorageClient(trackerServer, storageServer); int i = storageClient.delete_file(グループ名,ファイル名); System.out.println( i==0 ? "删除成功" : "删除失败:"+i); } catch (例外 e) { e.printStackTrace(); throw new RuntimeException("删除异常,"+e.getMessage()); } }













// public static void main(String[] args) { // FastDfsUtils.delete("group1","M00/00/0F/oYYBAGJ6IGaAWQeOAAbMJw3URKE510.gif"); // } }

 3. バックエンドインターフェース

パッケージ com.lzc.basic.controller;

インポート com.lzc.basic.Exception.GlobalExceptionEnum;
インポート com.lzc.basic.utils.AjaxResult;
インポート com.lzc.basic.utils.FastDfsUtils;
インポート org.apache.commons.io .FilenameUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

/**
* アップロード
* ダウンロード = 不要
* 表示 = パス
* 削除
* Update = delete + Upload
*/
@RestController
@RequestMapping("/fastDfs")
public class FastDfsController { //@RequestPart は複雑なフォーム項目を処理します。デフォルトの name="file" は、アップロードされたファイルの name 属性値と一致します。ファイル@PostMapping


public AjaxResult Upload(@RequestPart(required = true,value = "file") MultipartFile file){ try { System.out.println(file.getOriginalFilename() + ":" + file.getSize()); // 1.複合オブジェクトの file.getBytes() からファイルのバイト配列を取得 getOriginalFilename() 元の名前を取得String originalFilename = file.getOriginalFilename(); // 2.FilenameUtils.getExtension(originalFilename); ファイル拡張子名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);// アップロードされたパスを返す} catch (IOException e) { e.printStackTrace();













return AjaxResult.error(GlobalExceptionEnum.UPLOAD_ERROR.getCode(),GlobalExceptionEnum.UPLOAD_ERROR.getMessage());
}
}
/**
* パラメーター: フルパス /goup1/xxxxx/yyyy
* 戻り値: 成功か失敗か、および戻りアドレス
* //アナログ フロントエンドは、このインターフェイスを呼び出すリクエストを送信します 1: 削除 http://localhost:8080/fastDfs//group1/M00/04/72/CgAIC2QetIuAVFPIAAgFDuhQH8Q183.gif - No //アナログ フロントエンドは、このインターフェイスを呼び出すリクエスト 2:
削除 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("/")); //グループ1


String RemotePath = pathTmp.substring(pathTmp.indexOf("/")+1);// /xxxxx/yyyy
FastDfsUtils.delete(groupName, RemotePath);
AjaxResult.success(path) を返します。
}
}

4. フロントエンド Vue と elementui

1. elementuiコンポーネントの導入

<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"
リスト-type="picture">
<el-button size="small" type="primary">クリックしてアップロード</el-button>
<div slot="tip" class="el-upload__tip">jpg/ のみをアップロードpng ファイル、500kb 以下</div>
</el-upload>
</el-form-item>

2. 写真のアップロードと削除方法

handleSuccess(response, file, fileList) { //1. action 属性が正しく記述されている限り、アップロードできます。//リソースを処理していますif(this.editForm.resources){//値this.editForm があります。 resource = this.editForm .resources+","+response.data; }else{ this.editForm.resources = response.data; } // fileList:resources = xx,xx,xx this.fileList=[];//を処理します。最初に空にしてから、すべてのペットの最新の写真を追加します。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":"リモート登録アドレス"+arr[ i ]}); } } ,

handleRemove(file, fileList) { //1. 削除インターフェイスを呼び出して、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 ("削除に成功しました!!!"); }else{ this.$message.success("削除に失敗しました!!!"); } }) //2. リソースを処理します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]){//削除された画像が見つかりましたarr.splice(i,1); Break; } } //[xx,zz]



















this.editForm.resources = arr.join(","); //xx,zz
console.log(this.editForm.resources)
}
//3. fileList を処理しています
this.fileList=[];// 最初に空にしてから、最新の情報を追加
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":"リモート登録アドレス"+arr[i]}); } } },