以下是一个使用 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>
请注意,上述代码仅为简单示例,实际应用中您可能需要进行更多的错误处理、权限控制、文件类型检查等操作。