gozero+vue文件上传

以下是一个使用 GoZero 和 Vue 实现新增文件上传功能的简单示例：

GoZero 后端部分：

package main

import (

    "fmt"

    "github.com/zeromicro/go-zero/rest/httpx"

    "io"

    "net/http"

    "os"

)

 

func uploadFileHandler(w http.ResponseWriter, r *http.Request) {

    // 限制文件大小

    r.ParseMultipartForm(32 << 20) 

 

    file, handler, err := r.FormFile("file")

    if err!= nil {

        httpx.Error(w, err)

        return

    }

    defer file.Close()

 

    // 创建文件保存路径

    f, err := os.Create("./uploads/" + handler.Filename)

    if err!= nil {

        httpx.Error(w, err)

        return

    }

    defer f.Close()

 

    // 拷贝文件内容

    _, err = io.Copy(f, file)

    if err!= nil {

        httpx.Error(w, err)

        return

    }

 

    httpx.Ok(w, "File uploaded successfully")

}

 

func main() {

    http.HandleFunc("/upload", uploadFileHandler)

    fmt.Println("Server is running on port 8080...")

    http.ListenAndServe(":8080", nil)

}

 

 

Vue 前端部分：

<template>

  <div>

    <input type="file" @change="handleFileChange" />

    <button @click="uploadFile">上传</button>

  </div>

</template>

 

<script>

export default {

  methods: {

    handleFileChange(event) {

      this.selectedFile = event.target.files[0];

    },

    uploadFile() {

      const formData = new FormData();

      formData.append('file', this.selectedFile);

 

      fetch('/upload', {

        method: 'POST',

        body: formData

      })

     .then(response => {

        if (response.ok) {

          console.log('文件上传成功');

        } else {

          console.error('文件上传失败');

        }

      })

     .catch(error => {

        console.error('发生错误:', error);

      });

    }

  }

}

</script>

请注意，上述代码仅为简单示例，实际应用中您可能需要进行更多的错误处理、权限控制、文件类型检查等操作。