Membina API Muat Naik Fail dalam Go

Mencipta API muat naik fail ialah keperluan biasa untuk banyak aplikasi web yang melibatkan pengguna menyerahkan dokumen, imej atau fail media lain. Dalam artikel ini, kami akan membimbing anda membina API muat naik fail yang selamat dan cekap menggunakan rangka kerja Go with Gin. Anda akan belajar cara menyediakan projek anda, mengendalikan fail masuk dan menyimpannya dengan selamat, memastikan aplikasi anda boleh mengurus kandungan yang dimuat naik pengguna dengan pasti.

Prasyarat

Pergi 1.21

Projek persediaan

Menyediakan kebergantungan projek Go.

go mod init app
go get github.com/gin-gonic/gin

Struktur projek

├─ main.go
├─ models
│  └─ product.go
└─ public
   └─ index.html

Fail projek

product.go

Produk ialah struktur ringkas yang digunakan untuk menguji muat naik fail dalam API muat naik fail kami.

package models

type Product struct {
    Name string
}

main.go

Fail ini menyediakan API muat naik fail. Ia akan mencipta dan menyediakan aplikasi web Go yang minimum.

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()
}

• Memulakan penghala Gin dan menyediakan siaran fail statik untuk direktori muat naik dan index.html.
• Memastikan direktori ./public/uploads wujud untuk menyimpan fail yang dimuat naik.
• Mentakrifkan laluan POST di /submit untuk mengendalikan muat naik fail, menyimpan fail ke pelayan dan mengembalikan nama produk serta nama fail yang dimuat naik.
• Mulakan pelayan Gin untuk mendengar permintaan masuk.

index.html

Borang HTML ini direka bentuk untuk pengguna memuat naik nama produk bersama-sama dengan fail imej yang berkaitan.

    <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>


    <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>
                </form>
</div>
                <div class="col-12">
                    <button class="btn btn-sm btn-primary">Submit</button>
                </div>
            
            <div id="alert" class="alert alert-success mt-3 d-none">
                <p></p>
                <img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172551064373054.jpg?x-oss-process=image/resize,p_40" class="lazy" id="img"    style="max-width:90%" alt="Membina API Muat Naik Fail dalam Go" >
            </div>
        </div>
    

Atas ialah kandungan terperinci Membina API Muat Naik Fail dalam Go. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!