feat(upload): add storage mode selection and retrieval for image uploads

Web/src/api/pictureApi.ts

@@ -73,6 +73,7 @@ export const ImageFormat = {
 export interface UploadPictureParams {
   permission?: number;
   albumId?: number;
+  storageModeId?: number; // 新增：存储模式ID
   convertToFormat?: ImageFormat;
   quality?: number;
   onProgress?: (percent: number) => void;
@@ -208,6 +209,7 @@ export async function uploadPicture(
   data: {
     permission?: number;
     albumId?: number;
+    storageModeId?: number; // 新增
     onProgress?: (percent: number) => void
   } = {}
 ): Promise<BaseResult<PictureResponse>> {
@@ -222,6 +224,10 @@ export async function uploadPicture(
     formData.append('albumId', data.albumId.toString());
   }
 
+  if (data.storageModeId !== undefined) { // 新增：添加 storageModeId 到 FormData
+    formData.append('storageModeId', data.storageModeId.toString());
+  }
+
   try {
     const token = localStorage.getItem('token');
     const headers: Record<string, string> = {};

Web/src/api/storageManagementApi.ts

@@ -139,6 +139,14 @@ export const getStorageTypes = async (): Promise<BaseResult<StorageTypeResponse[
     );
 };
 
+// 获取可用的存储模式 (通常是启用的模式，用于选择)
+export const getAvailableStorageModes = async (): Promise<BaseResult<StorageModeResponse[]>> => {
+    return fetchApi<StorageModeResponse[]>(
+        '/management/storage/get_available_modes',
+        { method: 'GET' }
+    );
+};
+
 // 获取默认存储模式ID
 export const getDefaultStorageModeId = async (): Promise<BaseResult<number | null>> => {
     return fetchApi<number | null>(

Web/src/components/upload/ImageUploadDialog.tsx

@@ -4,6 +4,7 @@ import { InboxOutlined } from '@ant-design/icons';
 import { v4 as uuidv4 } from 'uuid';
 import type { UploadFile, AlbumResponse } from '../../api';
 import { uploadPicture, getAlbums } from '../../api';
+import { getAvailableStorageModes, type StorageModeResponse } from '../../api/storageManagementApi'; // 新增导入
 
 const { Dragger } = Upload;
 const { Option } = Select;
@@ -19,11 +20,13 @@ const ImageUploadDialog: React.FC<UploadDialogProps> = ({ visible, onClose, onUp
   const [uploading, setUploading] = useState(false);
   const [form] = Form.useForm();
   const [albums, setAlbums] = useState<AlbumResponse[]>([]);
+  const [availableStorageModes, setAvailableStorageModes] = useState<StorageModeResponse[]>([]); // 新增状态
   const [concurrentUploads, setConcurrentUploads] = useState<number>(3);
   
   useEffect(() => {
     if (visible) {
       fetchAlbums();
+      fetchStorageModes(); // 新增调用
     }
   }, [visible]);
   
@@ -38,6 +41,26 @@ const ImageUploadDialog: React.FC<UploadDialogProps> = ({ visible, onClose, onUp
     }
   };
 
+  // 新增：获取可用存储模式
+  const fetchStorageModes = async () => {
+    try {
+      const result = await getAvailableStorageModes();
+      if (result.success && result.data) {
+        setAvailableStorageModes(result.data);
+        // 尝试设置默认存储模式ID（如果后端有此逻辑，或者选择第一个作为默认）
+        if (result.data.length > 0) {
+          // 这里可以根据业务逻辑设置一个默认选中的 storageModeId
+          // form.setFieldsValue({ storageModeId: result.data[0].id });
+        }
+      } else {
+        message.error('获取存储模式列表失败: ' + result.message);
+      }
+    } catch (error) {
+      console.error('获取存储模式列表失败:', error);
+      message.error('获取存储模式列表失败');
+    }
+  };
+
   const handleBeforeUpload = (file: File) => {
     // 检查是否为图片文件
     const isImage = file.type.startsWith('image/');
@@ -78,6 +101,7 @@ const ImageUploadDialog: React.FC<UploadDialogProps> = ({ visible, onClose, onUp
       const params: {
         permission?: number;
         albumId?: number;
+        storageModeId?: number; // 新增
       } = {};
 
       if (values.permission !== undefined) {
@@ -86,6 +110,9 @@ const ImageUploadDialog: React.FC<UploadDialogProps> = ({ visible, onClose, onUp
       if (values.albumId) {
         params.albumId = values.albumId;
       }
+      if (values.storageModeId) { // 新增
+        params.storageModeId = values.storageModeId;
+      }
       
       let successCount = 0;
       let failCount = 0;
@@ -103,7 +130,7 @@ const ImageUploadDialog: React.FC<UploadDialogProps> = ({ visible, onClose, onUp
         try {
           // 上传文件
           const result = await uploadPicture(item.file, {
-            ...params,
+            ...params, // 传递包含 storageModeId 的 params
             onProgress: (percent) => {
               setUploadQueue((prev) => 
                 prev.map(file => file.id === item.id ? { ...file, percent } : file)
@@ -319,6 +346,7 @@ const ImageUploadDialog: React.FC<UploadDialogProps> = ({ visible, onClose, onUp
         initialValues={{
           permission: 2,
           concurrentUploads: 3
+          // storageModeId: undefined // 可以设置一个初始值或留空
         }}
       >
         <Form.Item
@@ -332,6 +360,19 @@ const ImageUploadDialog: React.FC<UploadDialogProps> = ({ visible, onClose, onUp
           </Select>
         </Form.Item>
 
+        {/* 新增：存储模式选择 */}
+        <Form.Item
+          name="storageModeId"
+          label="选择存储模式"
+          rules={[{ required: true, message: '请选择存储模式!' }]}
+        >
+          <Select placeholder="选择图片存储模式">
+            {availableStorageModes.map(mode => (
+              <Option key={mode.id} value={mode.id}>{mode.name} ({mode.storageTypeName})</Option>
+            ))}
+          </Select>
+        </Form.Item>
+
         <Form.Item
           name="permission"
           label="图片权限"