loveuer/ushare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init: 0.1.0

Browse Source 
feat: 基本功能有了
  1. 分片上传
  2. code 回显
  3. 下载
todo: 断点上传
This commit is contained in:
loveuer 2025-05-06 18:04:20 +08:00
parent 7ec8cd5c0e
commit b3ff70167f
10 changed files with 345 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Dockerfile Normal file
View File

@ -0,0 +1,31 @@
# 第一阶段：构建前端
FROM node:20-alpine AS frontend-builder
WORKDIR /app
RUN npm install -g pnpm
COPY frontend/package.json frontend/pnpm-lock.yaml* ./
RUN pnpm install
COPY frontend .
RUN pnpm run build
# 第二阶段：构建 Golang 后端
FROM golang:alpine AS backend-builder
WORKDIR /app
COPY go.mod go.sum ./
RUN go mod download
COPY main.go internal ./
RUN CGO_ENABLED=0 GOOS=linux go build -o main .
# 第三阶段：生成最终镜像
FROM nginx:alpine
COPY --from=frontend-builder /app/dist /usr/share/nginx/html
COPY --from=backend-builder /app/main /app/main
# 配置 Nginx
RUN rm /etc/nginx/conf.d/default.conf
COPY deployment/nginx.conf /etc/nginx/conf.d
# 开放端口
EXPOSE 80
# 启动服务
CMD sh -c "/app/main & nginx -g 'daemon off;'"

16
deployment/nginx.conf Normal file
View File

@ -0,0 +1,16 @@
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:9119;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

76
frontend/src/api/upload.ts Normal file
View File

@ -0,0 +1,76 @@
import { useState } from 'react';
interface UploadRes {
code: string
}
export const useFileUpload = () => {
const [progress, setProgress] = useState(0);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const uploadFile = async (file: File): Promise<string> => {
setLoading(true);
setError(null);
setProgress(0);
try {
console.log(`[D] api.Upload: upload file = ${file.name}, size = ${file.size}`, file);
const url = `/api/share/${file.name}`;
// 1. 初始化上传
const res1 = await fetch(url, {
method: "PUT",
headers: {"X-File-Size": file.size.toString()}
});
if (!res1.ok) {
throw new Error("上传失败<1>");
}
const j1 = await res1.json() as UploadRes;
if (!j1.code) {
throw new Error("上传失败<2>");
}
// 2. 准备分片上传
const CHUNK_SIZE = 1024 * 1024;
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
const code = j1.code;
// 3. 上传分片
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
const start = chunkIndex * CHUNK_SIZE;
const end = Math.min(start + CHUNK_SIZE, file.size);
const chunk = file.slice(start, end);
const res = await fetch(`/api/share/${code}`, {
method: "POST",
headers: {
"Range": `bytes=${start}-${end - 1}`,
"Content-Type": "application/octet-stream"
},
body: chunk
});
if (!res.ok) {
const err = await res.text();
throw new Error(`上传失败<3>: ${err}`);
}
// 更新进度
// const currentProgress = Number(((chunkIndex + 1) / totalChunks * 100).toFixed(2)); // 小数
const currentProgress = Math.round(((chunkIndex + 1) / totalChunks) * 100); // 整数 0-100
setProgress(currentProgress);
}
return code;
} catch (err) {
throw err; // 将错误继续抛出以便组件处理
} finally {
setLoading(false);
}
};
return { uploadFile, progress, loading, error };
};

91
frontend/src/component/button/u-button.tsx
View File

@ -1,5 +1,5 @@
import React, {ReactNode} from 'react';
import {createUseStyles} from "react-jss";
import {createUseStyles} from 'react-jss';
const useStyle = createUseStyles({
ubutton: {
@ -10,6 +10,8 @@ const useStyle = createUseStyles({
borderRadius: "5px",
cursor: "pointer",
transition: "background-color 0.3s",
position: 'relative',
overflow: 'hidden',
"&:hover": {
backgroundColor: "#45a049",
},
@ -17,17 +19,84 @@ const useStyle = createUseStyles({
backgroundColor: "#a5d6a7",
cursor: "not-allowed",
},
}
})
},
loadingContent: {
display: 'flex',
alignItems: 'center',
gap: '8px',
},
spinner: {
animation: '$spin 1s linear infinite',
border: '2px solid white',
borderTopColor: 'transparent',
borderRadius: '50%',
width: '16px',
height: '16px',
},
'@keyframes spin': {
'0%': {transform: 'rotate(0deg)'},
'100%': {transform: 'rotate(360deg)'},
},
progressBar: {
position: 'absolute',
bottom: 0,
left: 0,
height: '3px',
backgroundColor: 'rgba(255,255,255,0.5)',
width: '100%',
},
progressFill: {
height: '100%',
backgroundColor: 'white',
transition: 'width 0.3s ease',
},
});
type Props = {
onClick: () => void;
onClick?: () => void;
children: ReactNode;
disabled?: boolean;
style?: React.CSSProperties | undefined;
style?: React.CSSProperties;
loading?: boolean;
process?: number;
};
export const UButton: React.FC<Props> = ({onClick, children, style,disabled = false}) => {
const classes= useStyle()
return <button style={style} className={classes.ubutton} disabled={disabled} onClick={onClick}>
{children}
</button>
}
export const UButton: React.FC<Props> = ({
onClick,
children,
disabled = false,
style,
loading,
process
}) => {
const classes = useStyle();
return (
<button
style={style}
className={classes.ubutton}
disabled={disabled || loading}
onClick={onClick}
>
{/* 显示加载状态或默认内容 */}
{loading ? (
<div className={classes.loadingContent}>
<span className={classes.spinner}/>
{children}
{process && `(${process}%)`}
</div>
) : children}
{/* 显示进度条 */}
{process !== undefined && (
<div className={classes.progressBar}>
<div
className={classes.progressFill}
style={{width: `${Math.min(Math.max(process, 0), 100)}%`}}
/>
</div>
)}
</button>
);
};

2
frontend/src/component/message/u-message.tsx
View File

@ -1,5 +1,5 @@
import {createRoot} from "react-dom/client";
import {useEffect, useState} from "react";
import {useState} from "react";
import {createUseStyles} from "react-jss";
const useStyle = createUseStyles({

192
frontend/src/page/component/panel-left.tsx
View File

@ -1,10 +1,11 @@
import {createUseStyles} from "react-jss";
import {UButton} from "../../component/button/u-button.tsx";
import React from "react";
import React, {useState} from "react";
import {useStore} from "../../store/share.ts";
import {message} from "../../component/message/u-message.tsx";
import {useFileUpload} from "../../api/upload.ts";
const useStyle = createUseStyles({
const useUploadStyle = createUseStyles({
container: {
backgroundColor: "#e3f2fd",
display: "flex",
@ -41,13 +42,93 @@ const useStyle = createUseStyles({
}
})
interface RespNew {
code: string
}
const useShowStyle = createUseStyles({
container: {
backgroundColor: "#e3f2fd",
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "relative", // 为关闭按钮提供定位基准
},
title: {
color: "#2c9678",
marginTop: 0,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
},
form: {
backgroundColor: "#C8E6C9",
boxShadow: "inset 0 0 15px rgba(56, 142, 60, 0.15)",
padding: "30px",
borderRadius: "15px",
width: "70%",
margin: "20px 60px 20px 0",
position: "relative",
},
closeButton: {
position: "absolute",
top: "10px",
right: "10px",
background: "transparent",
color: "white",
border: "none",
borderRadius: "50%",
width: "24px",
height: "24px",
cursor: "pointer",
"&:hover": {
// background: "#cc0000",
boxShadow: "20px 20px 60px #fff, -20px -20px 60px #fff",
// boxShadow: "20px 20px 60px #eee",
},
},
codeWrapper: {
backgroundColor: "rgba(255,255,255,0.8)",
padding: "0 15px",
borderRadius: "8px",
margin: "15px 0",
overflowX: "auto",
},
pre: {
display: 'flex',
flexDirection: 'row',
color: 'black',
alignItems: 'center',
height: '24px',
"& > code": {
marginLeft: "0",
}
},
copyButton: {
marginLeft: 'auto',
background: "#2c9678",
color: "white",
border: "none",
padding: "8px 16px",
borderRadius: "4px",
cursor: "pointer",
transition: "background 0.3s",
"&:hover": {
background: "#1f6d5a",
},
},
});
export const PanelLeft = () => {
const style = useStyle()
const [code, set_code] = useState("")
if (code) {
return <PanelLeftShow code={code} set_code={set_code} />
}
return <PanelLeftUpload set_code={set_code}/>
};
const PanelLeftUpload: React.FC<{ set_code: (code:string) => void }> = ({set_code}) => {
const style = useUploadStyle()
const {file, setFile} = useStore()
const {uploadFile, progress, loading} = useFileUpload();
function onFileSelect() {
// @ts-ignore
@ -64,55 +145,8 @@ export const PanelLeft = () => {
return
}
console.log(`[D] onFileUpload: upload file = ${file.name}, size = ${file.size}`, file)
let res1 = await fetch(`/api/share/${file.name}`, {
method: "PUT",
headers: {"X-File-Size": file.size.toString()}
})
let j1 = await res1.json() as RespNew
console.log('[D] onFileUpload: json 1 =', j1)
if (!j1.code) {
return
}
// todo: for 循环上传文件分片直到上传完成
// 2. 分片上传配置
const CHUNK_SIZE = 1024 * 1024 // 1MB分片
const totalChunks = Math.ceil(file.size / CHUNK_SIZE)
const code = j1.code
// 3. 循环上传所有分片
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
const start = chunkIndex * CHUNK_SIZE
const end = Math.min(start + CHUNK_SIZE, file.size)
const chunk = file.slice(start, end)
// 4. 构造Range头（bytes=start-end）
const rangeHeader = `bytes=${start}-${end - 1}` // end-1因为Range是闭区间
// 5. 上传分片
const res = await fetch(`/api/share/${code}`, {
method: "POST",
headers: {
"Range": rangeHeader,
"Content-Type": "application/octet-stream" // 二进制流类型
},
body: chunk
})
if (!res.ok) {
const err = await res.text()
throw new Error(`分片 ${chunkIndex} 上传失败: ${err}`)
}
console.log(`[D] 分片进度: ${chunkIndex + 1}/${totalChunks}`,
`(${Math.round((chunkIndex + 1)/totalChunks*100)}%)`)
}
console.log('[D] 所有分片上传完成')
const code = await uploadFile(file)
set_code(code)
}
function onFileClean() {
@ -123,13 +157,17 @@ export const PanelLeft = () => {
<div className={style.form}>
<h2 className={style.title}>上传文件</h2>
{
!file &&
!file && !loading &&
<UButton onClick={onFileSelect}>选择文件</UButton>
}
{
file &&
file && !loading &&
<UButton onClick={onFileUpload}>上传文件</UButton>
}
{
loading &&
<UButton process={progress} loading={loading}>上传中</UButton>
}
<input type="file" className={style.file} id="real-file-input" onChange={onFileChange}/>
{
file &&
@ -140,4 +178,44 @@ export const PanelLeft = () => {
}
</div>
</div>
}
const PanelLeftShow: React.FC<{ code: string; set_code: (code: string) => void }> = ({ code, set_code }) => {
const classes = useShowStyle();
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
message.success("复制成功！");
} catch (err) {
message.warning("复制失败，请手动选择文本复制");
}
};
return (
<div className={classes.container}>
<div className={classes.form}>
<button
className={classes.closeButton}
onClick={() => set_code('')}
aria-label="关闭"
>
×
</button>
<h2 className={classes.title}>
上传成功!
</h2>
<div className={classes.codeWrapper}>
<pre className={classes.pre}>
<code>{code}</code>
<button className={classes.copyButton} onClick={handleCopy}>
一键复制
</button>
</pre>
</div>
</div>
</div>
);
};

4
internal/controller/meta.go
View File

@ -40,11 +40,11 @@ var (
MetaManager = &meta{m: make(map[string]*metaInfo)}
)
const letters = "1234567890abcdefghijklmnopqrstuvwxyz"
const letters = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ"
func (m *meta) New(size int64, filename, ip string) (string, error) {
now := time.Now()
code, err := gonanoid.Generate(letters, 16)
code, err := gonanoid.Generate(letters, opt.CodeLength)
if err != nil {
return "", err
}

2
internal/handler/share.go
View File

@ -73,7 +73,7 @@ func ShareUpload() nf.HandlerFunc {
rangeValidator := regexp.MustCompile(`^bytes=\d+-\d+$`)
return func(c *nf.Ctx) error {
code := strings.TrimSpace(c.Param("code"))
if len(code) != 16 {
if len(code) != opt.CodeLength {
return c.Status(http.StatusBadRequest).JSON(map[string]string{"msg": "invalid file code"})
}

1
internal/opt/var.go
View File

@ -5,6 +5,7 @@ import "path/filepath"
const (
Meta = ".meta."
HeaderSize = "X-File-Size"
CodeLength = 8
)
func FilePath(code string) string {

3
main.go
View File

@ -13,12 +13,13 @@ import (
func init() {
flag.BoolVar(&opt.Cfg.Debug, "debug", false, "debug mode")
flag.StringVar(&opt.Cfg.Address, "address", "0.0.0.0:80", "")
flag.StringVar(&opt.Cfg.Address, "address", "0.0.0.0:9119", "")
flag.StringVar(&opt.Cfg.DataPath, "data", "/data", "")
flag.Parse()
if opt.Cfg.Debug {
log.SetLogLevel(log.LogLevelDebug)
log.Debug("start server with debug mode")
}
}