mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-09-04 23:26:51 +08:00
feat(NoteForm): 增加文件上传状态反馈
- 添加上传中和上传成功状态的显示- 优化上传逻辑,增加状态控制 - 提升用户体验,明确上传过程
This commit is contained in:
@@ -7,7 +7,7 @@ import {
|
|||||||
FormLabel,
|
FormLabel,
|
||||||
FormMessage,
|
FormMessage,
|
||||||
} from '@/components/ui/form.tsx'
|
} from '@/components/ui/form.tsx'
|
||||||
import { useEffect } from 'react'
|
import { useEffect,useState } from 'react'
|
||||||
import { useForm, useWatch } from 'react-hook-form'
|
import { useForm, useWatch } from 'react-hook-form'
|
||||||
import { zodResolver } from '@hookform/resolvers/zod'
|
import { zodResolver } from '@hookform/resolvers/zod'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
@@ -119,6 +119,9 @@ const CheckboxGroup = ({
|
|||||||
|
|
||||||
/* -------------------- 主组件 -------------------- */
|
/* -------------------- 主组件 -------------------- */
|
||||||
const NoteForm = () => {
|
const NoteForm = () => {
|
||||||
|
|
||||||
|
const [isUploading, setIsUploading] = useState(false)
|
||||||
|
const [uploadSuccess, setUploadSuccess] = useState(false)
|
||||||
/* ---- 全局状态 ---- */
|
/* ---- 全局状态 ---- */
|
||||||
const { addPendingTask, currentTaskId, setCurrentTask, getCurrentTask, retryTask } =
|
const { addPendingTask, currentTaskId, setCurrentTask, getCurrentTask, retryTask } =
|
||||||
useTaskStore()
|
useTaskStore()
|
||||||
@@ -185,12 +188,18 @@ const NoteForm = () => {
|
|||||||
const handleFileUpload = async (file: File, cb: (url: string) => void) => {
|
const handleFileUpload = async (file: File, cb: (url: string) => void) => {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', file)
|
formData.append('file', file)
|
||||||
|
setIsUploading(true)
|
||||||
|
setUploadSuccess(false)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const { data } = await uploadFile(formData)
|
const data = await uploadFile(formData)
|
||||||
if (data.code === 0) cb(data.data.url)
|
cb(data.url)
|
||||||
|
setUploadSuccess(true)
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('上传失败:', err)
|
console.error('上传失败:', err)
|
||||||
message.error('上传失败,请重试')
|
message.error('上传失败,请重试')
|
||||||
|
} finally {
|
||||||
|
setIsUploading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -335,10 +344,16 @@ const NoteForm = () => {
|
|||||||
input.click()
|
input.click()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p className="text-center text-sm text-gray-500">
|
{isUploading ? (
|
||||||
拖拽文件到这里上传 <br />
|
<p className="text-center text-sm text-blue-500">上传中,请稍候…</p>
|
||||||
<span className="text-xs text-gray-400">或点击选择文件</span>
|
) : uploadSuccess ? (
|
||||||
</p>
|
<p className="text-center text-sm text-green-500">上传成功!</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-center text-sm text-gray-500">
|
||||||
|
拖拽文件到这里上传 <br />
|
||||||
|
<span className="text-xs text-gray-400">或点击选择文件</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user