vue+springboot を使用して大きなファイルをアップロードする方法
ロジック
大きなファイルをアップロードする必要がある場合は、次のロジックを考慮する必要があります。
大きなファイルをアップロードするには、通常、ファイルをスライス (チャンク) に分けてアップロードし、すべてのスライスが完全なファイルにマージされます。これは、次のロジックに従って実装できます:
フロントエンドは、ページにアップロードするファイルを選択し、Blob.slice メソッドを使用してファイルをスライスします。各スライスのサイズは固定値 (5MB など) であり、合計でスライスが何個あるかを記録します。
スライスをバックエンド サービスに個別にアップロードすると、XMLHttpRequest や Axios などのライブラリを使用して Ajax リクエストを送信できます。各スライスには、現在のスライス インデックス (0 から始まる)、スライスの総数、およびスライス ファイル データの 3 つのパラメータを含める必要があります。
バックエンド サービスはスライスを受信すると、指定されたパスの下の一時ファイルにスライスを保存し、アップロードされたスライス インデックスとアップロード ステータスを記録します。スライスのアップロードに失敗した場合は、フロントエンドにスライスを再送信するように通知されます。
すべてのスライスが正常にアップロードされると、バックエンド サービスはすべてのスライスの内容を読み取り、それらを完全なファイルにマージします。ファイルのマージは、java.io.SequenceInputStream と BufferedOutputStream を使用して実現できます。
最後に、ファイルアップロード成功の応答結果をフロントエンドに返します。
フロントエンド
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="upload()">Upload</button>
<script>
function upload() {
let file = document.getElementById("fileInput").files[0];
let chunkSize = 5 * 1024 * 1024; // 切片大小为5MB
let totalChunks = Math.ceil(file.size / chunkSize); // 计算切片总数
let index = 0;
while (index < totalChunks) {
let chunk = file.slice(index * chunkSize, (index + 1) * chunkSize);
let formData = new FormData();
formData.append("file", chunk);
formData.append("index", index);
formData.append("totalChunks", totalChunks);
// 发送Ajax请求上传切片
$.ajax({
url: "/uploadChunk",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
if (++index >= totalChunks) {
// 所有切片上传完成，通知服务端合并文件
$.post("/mergeFile", {fileName: file.name}, function () {
alert("Upload complete!");
})
}
}
});
}
}
</script>
</body>
</html>バックエンド
コントローラー層:
@RestController
public class FileController {
@Value("${file.upload-path}")
private String uploadPath;
@PostMapping("/uploadChunk")
public void uploadChunk(@RequestParam("file") MultipartFile file,
@RequestParam("index") int index,
@RequestParam("totalChunks") int totalChunks) throws IOException {
// 以文件名+切片索引号为文件名保存切片文件
String fileName = file.getOriginalFilename() + "." + index;
Path tempFile = Paths.get(uploadPath, fileName);
Files.write(tempFile, file.getBytes());
// 记录上传状态
String uploadFlag = UUID.randomUUID().toString();
redisTemplate.opsForList().set("upload:" + fileName, index, uploadFlag);
// 如果所有切片已上传，则通知合并文件
if (isAllChunksUploaded(fileName, totalChunks)) {
sendMergeRequest(fileName, totalChunks);
}
}
@PostMapping("/mergeFile")
public void mergeFile(String fileName) throws IOException {
// 所有切片均已成功上传，进行文件合并
List<File> chunkFiles = new ArrayList<>();
for (int i = 0; i < getTotalChunks(fileName); i++) {
String chunkFileName = fileName + "." + i;
Path tempFile = Paths.get(uploadPath, chunkFileName);
chunkFiles.add(tempFile.toFile());
}
Path destFile = Paths.get(uploadPath, fileName);
try (OutputStream out = Files.newOutputStream(destFile);
SequenceInputStream seqIn = new SequenceInputStream(Collections.enumeration(chunkFiles));
BufferedInputStream bufIn = new BufferedInputStream(seqIn)) {
byte[] buffer = new byte[1024];
int len;
while ((len = bufIn.read(buffer)) > 0) {
out.write(buffer, 0, len);
}
}
// 清理临时文件和上传状态记录
for (int i = 0; i < getTotalChunks(fileName); i++) {
String chunkFileName = fileName + "." + i;
Path tempFile = Paths.get(uploadPath, chunkFileName);
Files.deleteIfExists(tempFile);
redisTemplate.delete("upload:" + chunkFileName);
}
}
private int getTotalChunks(String fileName) {
// 根据文件名获取总切片数
return Objects.requireNonNull(Paths.get(uploadPath, fileName).toFile().listFiles()).length;
}
private boolean isAllChunksUploaded(String fileName, int totalChunks) {
// 判断所有切片是否已都上传完成
List<String> uploadFlags = redisTemplate.opsForList().range("upload:" + fileName, 0, -1);
return uploadFlags != null && uploadFlags.size() == totalChunks;
}
private void sendMergeRequest(String fileName, int totalChunks) {
// 发送合并文件请求
new Thread(() -> {
try {
URL url = new URL("http://localhost:8080/mergeFile");
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("POST");
conn.setDoOutput(true);
conn.setDoInput(true);
conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
OutputStream out = conn.getOutputStream();
String query = "fileName=" + fileName;
out.write(query.getBytes());
out.flush();
out.close();
BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream(), StandardCharsets.UTF_8));
while (br.readLine() != null) ;
br.close();
} catch (IOException e) {
e.printStackTrace();
}
}).start();
}
@Autowired
private RedisTemplate<String, Object> redisTemplate;
}このうち、file.upload-pathは保存ファイルのアップロード パスは application.properties または application.yml で設定できます。同時に、アップロード状況を記録するために RedisTemplate の Bean を追加する必要があります。
RedisTemplate の設定
RedisTemplate を使用する必要がある場合は、次のパッケージを導入する必要があります
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>同時に yml
spring.redis.host=localhost spring.redis.port=6379 spring.redis.database=0
@Component
public class myClass {
@Autowired
private RedisTemplate<String, Object> redisTemplate;
public void set(String key, Object value) {
redisTemplate.opsForValue().set(key, value);
}
public Object get(String key) {
return redisTemplate.opsForValue().get(key);
}
}- アップロードを考慮して、アップロードするスライスのサイズを毎回制御する必要があります速度と安定性を確保し、サーバー リソースの過剰な占有やネットワークの影響を回避します。不安定なため、アップロードに失敗しました。
- スライスのアップロードには順序があります。マージする前にすべてのスライスがアップロードされていることを確認する必要があります。そうしないと、ファイルが不完全になったり、ファイルのマージ エラーが発生したりする可能性があります。
- アップロードが完了したら、ディスク容量の過剰な占有によるサーバーのクラッシュを避けるために、一時ファイルを時間内にクリーンアップする必要があります。期限切れの一時ファイルをクリーンアップする定期的なタスクを設定できます。
以上がvue+springboot を使用して大きなファイルをアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1667
14
1426
52
1328
25
1273
29
1255
24
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
VUEのボタンに関数を追加する方法
Apr 08, 2025 am 08:51 AM
HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。
VueでWatchの使用方法
Apr 07, 2025 pm 11:36 PM
Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。
Vueによる前のページに戻る方法
Apr 07, 2025 pm 11:30 PM
vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。
Vue Multi-Page開発とはどういう意味ですか？
Apr 07, 2025 pm 11:57 PM
VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。
React vs. Vue：Netflixはどのフレームワークを使用していますか？
Apr 14, 2025 am 12:19 AM
netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.
VUEトラバーサルの使用方法
Apr 07, 2025 pm 11:48 PM
Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。
vue.jsでJSファイルを参照する方法
Apr 07, 2025 pm 11:27 PM
vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。
