ホームページ > 記事 > バックエンド開発 > Go でファイルアップロード API を構築する

Go でファイルアップロード API を構築する

WBOYオリジナル: 2024-09-05 12:30:321140ブラウズ

Building a File Upload API in Go

ファイルアップロード 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 に移動します

このテストページが表示されます。

Building a File Upload API in Go

テスト

入力フィールドに名前を入力し、アップロードするファイルを参照します。

Building a File Upload API in Go

送信ボタンをクリックしてフォームを送信します。その後、API から返された送信された情報とともに成功メッセージが表示されます。

Building a File Upload API in Go

本質的に、Gin フレームワークを使用すると、Web アプリケーションでのファイルのアップロードの管理が合理化されます。簡単なハンドラーとフォーム設定を使用することで、ファイルのアップロードを効率的に処理し、プロジェクトのユーザーエクスペリエンスを向上させることができます。

ソースコード: https://github.com/stackpuz/Example-File-Upload-Go

数分で CRUD Web アプリを作成: https://stackpuz.com

以上がGo でファイルアップロード API を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript gin html Static for Directory goto using public Struct function this alert display input github web app http https router

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：MySQL を使用した Golang API の Docker 化と Docker Compose サポートの追加次の記事：MySQL を使用した Golang API の Docker 化と Docker Compose サポートの追加

続きを見る

Go でファイル アップロード API を構築する

前提条件

プロジェクトのセットアップ

プロジェクトの構造

プロジェクトファイル

製品.go

メイン.ゴー

インデックス.html

プロジェクトの実行

テスト

関連記事

Go でファイルアップロード API を構築する