Bagaimana untuk melaksanakan muat naik fail seret dan lepas di Golang?

Bagaimana untuk melaksanakan muat naik fail seret dan lepas di Golang? Dayakan perisian tengah; kendalikan permintaan muat naik fail; buat kod HTML untuk kawasan drag dan drop

Cara melaksanakan muat naik fail seret dan lepas di Golang

Pengenalan

Seret dan lepas muat naik fail ialah keperluan biasa yang membolehkan pengguna memuat naik fail ke pelayan web dengan mudah Artikel ini akan membimbing anda tentang cara melaksanakan muat naik fail seret dan lepas dalam Go.

Keperluan teknikal

• Go 1.16 atau lebih tinggi
• Rangka kerja web serasi penyemak imbas (seperti Echo, Gin)

Echo

import (
    "github.com/labstack/echo/v4/middleware"
)

// Enable upload middleware
r.Use(middleware.BodyLimit("10MB"))

2. Memproses permintaan

Buat laluan untuk mengendalikan permintaan muat naik fail. Berikut ialah contoh menggunakan rangka kerja Echo:

import (
    "github.com/labstack/echo/v4"
)

func fileUpload(c echo.Context) error {
    // 获取上传的文件
    file, err := c.FormFile("file")
    if err != nil {
        return err
    }

    // 保存文件
    filename := "path/to/file.ext"
    err = c.SaveFile(file, filename)
    if err != nil {
        return err
    }

    // 返回成功响应
    return c.JSON(http.StatusOK, "File uploaded successfully")
}

3. Kod HTML

Buat kod HTML yang mengandungi kawasan seret dan lepas. Seperti yang ditunjukkan di bawah:

<div id="drop-zone" ondragenter="dragEnter(event)" ondrop="drop(event)" ondragover="dragOver(event)">
    <p>Drop files here</p>
</div>

4 kod JavaScript

Tambah kod JavaScript untuk mengendalikan acara seret dan lepas.

function dragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.classList.add('drag-over');
}

function dragOver(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.classList.add('drag-over');
}

function drop(e) {
    e.stopPropagation();
    e.preventDefault();

    const files = e.dataTransfer.files;
    // 这里可以上传文件
    sendFile(files[0]);

    e.target.classList.remove('drag-over');
}

Kes praktikal

Ini ialah kes praktikal lengkap yang menunjukkan cara melaksanakan muat naik fail drag-and-drop.

Klon atau muat turun repositori: https://github.com/golang-developer/drag-and-drop-file-upload

Kompil dan jalankan aplikasi:

• Buka penyemak imbas dan lawati localhost:8080
• Seret dan lepaskan fail ke dalam zon jatuh go run main.go
Semak konsol untuk melihat laluan fail yang dimuat naik
• Kesimpulan

Dengan mengikuti langkah dalam artikel ini, anda boleh melaksanakan muat naik fail seret dan lepas dengan mudah dalam Go. Dengan menggunakan kod middleware, penghalaan, HTML dan JavaScript yang betul, anda boleh mencipta antara muka mesra pengguna yang membolehkan pengguna memuat naik fail dengan mudah ke pelayan anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan muat naik fail seret dan lepas di Golang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!