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';
|
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 || '';
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user