Go でファイル アップロード API を構築する
- WBOYオリジナル
- 2024-09-05 12:30:321123ブラウズ
ファイル アップロード API の作成は、ユーザーがドキュメント、画像、またはその他のメディア ファイルを送信する多くの Web アプリケーションにとって共通の要件です。この記事では、Gin フレームワークで Go を使用して、安全で効率的なファイル アップロード API を構築する方法を説明します。プロジェクトを設定し、受信ファイルを処理し、それらを安全に保存して、ユーザーがアップロードしたコンテンツをアプリケーションで確実に管理できるようにする方法を学びます。
前提条件
Go 1.21
プロジェクトのセットアップ
Go プロジェクトの依存関係を設定します。
go mod init app go get github.com/gin-gonic/gin
プロジェクトの構造
├─ main.go ├─ models │ └─ product.go └─ public └─ index.html
プロジェクトファイル
製品.go
プロダクトは、ファイル アップロード API でファイル アップロードをテストするために使用される単純な構造体です。
package models
type Product struct {
Name string
}
メイン.ゴー
このファイルはファイル アップロード API を設定します。最小限の Go Web アプリケーションを作成してセットアップします。
package main
import (
"app/models"
"io"
"net/http"
"os"
"path/filepath"
"github.com/gin-gonic/gin"
"github.com/gin-gonic/gin/binding"
)
func main() {
router := gin.Default()
uploadPath := "./public/uploads"
os.MkdirAll(uploadPath, os.ModePerm)
router.Static("/uploads", uploadPath)
router.StaticFile("/", "./public/index.html")
router.POST("/submit", func(c *gin.Context) {
var product models.Product
if err := c.ShouldBindWith(&product, binding.FormMultipart); err != nil {
c.AbortWithStatusJSON(http.StatusBadRequest, err.Error())
return
}
image, _ := c.FormFile("Image")
filePath := filepath.Join(uploadPath, image.Filename)
src, _ := image.Open()
dst, _ := os.Create(filePath)
io.Copy(dst, src)
c.JSON(http.StatusOK, gin.H{"Name": product.Name, "Image": image.Filename})
})
router.Run()
}
- Gin ルーターを初期化し、アップロード ディレクトリとindex.html に提供される静的ファイルを設定します。
- アップロードされたファイルを保存するための ./public/uploads ディレクトリが存在することを確認します。
- ファイルのアップロードを処理し、ファイルをサーバーに保存し、製品名とアップロードされたファイル名を返すために、/submit で POST ルートを定義します。
- Gin サーバーを起動して、受信リクエストをリッスンします。
インデックス.html
この HTML フォームは、ユーザーが製品名と関連する画像ファイルをアップロードできるように設計されています。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<script>
function submitForm() {
let form = document.getElementById('form')
let data = new FormData(form)
fetch('submit', {
method: 'POST',
body: data
}).then(res => {
res.json().then(result => {
let alert = document.getElementById('alert')
alert.children[0].innerText = `Upload success!\nName: ${result.Name}\nImage: ${result.Image}`
alert.children[1].src = `/uploads/${result.Image}`
alert.classList.remove('d-none')
form.reset()
})
})
return false
}
</script>
</head>
<body>
<div class="container">
<div class="row mt-3">
<form id="form" onsubmit="return submitForm()">
<div class="mb-3 col-12">
<label class="form-label" for="name">Name</label>
<input id="name" name="Name" class="form-control form-control-sm" required />
</div>
<div class="mb-3 col-12">
<label class="form-label" for="image">Image</label>
<input type="file" accept="image/*" id="image" name="Image" class="form-control form-control-sm" required />
</div>
</div>
<div class="col-12">
<button class="btn btn-sm btn-primary">Submit</button>
</div>
</form>
<div id="alert" class="alert alert-success mt-3 d-none">
<p></p>
<img id="img" width="200px" />
</div>
</div>
</div>
</body>
</html>
フォームは、フォーム送信時にトリガーされる JavaScript 関数 submitForm() を介して送信するように設定されています。さらに、アップロードされた画像と、送信に成功した後の成功メッセージを表示できる非表示のアラート セクションがあります。
プロジェクトの実行
go run main.go
Web ブラウザを開いて http://localhost:8080 に移動します
このテスト ページが表示されます。
テスト
入力フィールドに名前を入力し、アップロードするファイルを参照します。
送信ボタンをクリックしてフォームを送信します。その後、API から返された送信された情報とともに成功メッセージが表示されます。
本質的に、Gin フレームワークを使用すると、Web アプリケーションでのファイルのアップロードの管理が合理化されます。簡単なハンドラーとフォーム設定を使用することで、ファイルのアップロードを効率的に処理し、プロジェクトのユーザー エクスペリエンスを向上させることができます。
ソースコード: https://github.com/stackpuz/Example-File-Upload-Go
数分で CRUD Web アプリを作成: https://stackpuz.com
以上がGo でファイル アップロード API を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。