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

ホームページ

バックエンド開発

Golang

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 05, 2024 pm 12:30 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7543

CakePHP チュートリアル

1381

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Debian OpenSSLの脆弱性は何ですか Apr 02, 2025 am 07:30 AM

OpenSSLは、安全な通信で広く使用されているオープンソースライブラリとして、暗号化アルゴリズム、キー、証明書管理機能を提供します。ただし、その歴史的バージョンにはいくつかの既知のセキュリティの脆弱性があり、その一部は非常に有害です。この記事では、Debian SystemsのOpenSSLの共通の脆弱性と対応測定に焦点を当てます。 Debianopensslの既知の脆弱性：OpenSSLは、次のようないくつかの深刻な脆弱性を経験しています。攻撃者は、この脆弱性を、暗号化キーなどを含む、サーバー上の不正な読み取りの敏感な情報に使用できます。