feat: use authenticated upload API in ImageUploader

- Add uploadFile function to commonApi with Authorization header
- Replace raw fetch with commonApi.uploadFile in ImageUploader

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Chever John 2026-06-30 16:27:17 +08:00
parent 01026a17d8
commit 1b506edfbf
No known key found for this signature in database
GPG Key ID: 2894D52ED1211DF0
2 changed files with 32 additions and 21 deletions

View File

@ -1,4 +1,4 @@
import { http } from './client'; import { http, getAccessToken } from './client';
import type { Company, CompanyMember, Profile } from '../types'; import type { Company, CompanyMember, Profile } from '../types';
interface Notification { interface Notification {
@ -46,4 +46,33 @@ export const commonApi = {
submitFeedback: (data: { content: string }) => submitFeedback: (data: { content: string }) =>
http.post('/common/feedback', data), http.post('/common/feedback', data),
uploadFile: async (file: File, bucket: string, pathPrefix: string): Promise<string> => {
const formData = new FormData();
formData.append('file', file);
formData.append('bucket', bucket);
formData.append('path_prefix', pathPrefix);
const token = getAccessToken();
const headers: Record<string, string> = {};
if (token) headers['Authorization'] = `Bearer ${token}`;
const res = await fetch('/api/v1/common/upload', {
method: 'POST',
headers,
body: formData,
credentials: 'include',
});
if (!res.ok) {
throw new Error('upload failed');
}
const json = await res.json();
if (json.code !== 0) {
throw new Error(json.message || 'upload failed');
}
return json.data?.url || '';
},
}; };

View File

@ -1,7 +1,7 @@
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Camera, X, Upload, ImageIcon } from 'lucide-react'; import { Camera, X, Upload, ImageIcon } from 'lucide-react';
import { http } from '../api'; import { commonApi } from '../api/common';
export type UploadBucket = 'avatars' | 'product_images'; export type UploadBucket = 'avatars' | 'product_images';
@ -68,25 +68,7 @@ export function ImageUploader({
setUploading(true); setUploading(true);
try { try {
const formDataObj = new FormData(); const publicUrl = await commonApi.uploadFile(file, bucket, pathPrefix);
formDataObj.append('file', file);
formDataObj.append('bucket', bucket);
formDataObj.append('path_prefix', pathPrefix);
// TODO: 文件上传接口待后端实现,当前使用 fetch 直接发送 FormData
const res = await fetch('/api/v1/common/upload', {
method: 'POST',
body: formDataObj,
});
if (!res.ok) {
alert('图片上传失败');
setUploading(false);
return;
}
const json = await res.json();
const publicUrl = json.data?.url || '';
setPreviewUrl(publicUrl); setPreviewUrl(publicUrl);
onChange(publicUrl); onChange(publicUrl);
setUploading(false); setUploading(false);