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:
parent
01026a17d8
commit
1b506edfbf
@ -1,4 +1,4 @@
|
||||
import { http } from './client';
|
||||
import { http, getAccessToken } from './client';
|
||||
import type { Company, CompanyMember, Profile } from '../types';
|
||||
|
||||
interface Notification {
|
||||
@ -46,4 +46,33 @@ export const commonApi = {
|
||||
|
||||
submitFeedback: (data: { content: string }) =>
|
||||
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 || '';
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Camera, X, Upload, ImageIcon } from 'lucide-react';
|
||||
import { http } from '../api';
|
||||
import { commonApi } from '../api/common';
|
||||
|
||||
export type UploadBucket = 'avatars' | 'product_images';
|
||||
|
||||
@ -68,25 +68,7 @@ export function ImageUploader({
|
||||
setUploading(true);
|
||||
|
||||
try {
|
||||
const formDataObj = new FormData();
|
||||
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 || '';
|
||||
const publicUrl = await commonApi.uploadFile(file, bucket, pathPrefix);
|
||||
setPreviewUrl(publicUrl);
|
||||
onChange(publicUrl);
|
||||
setUploading(false);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user