Rumah > pembangunan bahagian belakang > Golang > Bagaimana untuk melaksanakan muat naik fail seret dan lepas di Golang?

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

PHPz
Lepaskan: 2024-06-05 12:48:57
asal
1162 orang telah melayarinya

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

如何在 Golang 中实现拖放文件上传?

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"))
Salin selepas log masuk

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")
}
Salin selepas log masuk
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>
Salin selepas log masuk
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');
}
Salin selepas log masuk
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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan