Go でファイルアップロード API を構築する-Golang-php.cn

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

WBOY

リリース： 2024-09-05 12:30:39

オリジナル

496 人が閲覧しました

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() を介して送信するように設定されています。さらに、アップロードされた画像と、送信に成功した後の成功メッセージを表示できる非表示のアラートセクションがあります。