feat: Component Upload complete

web/app/i18n.ts

@@ -2,6 +2,8 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 const en = {
+  UploadDataSuccessfully: 'file uploaded successfully',
+  UploadDataFailed: 'file upload failed',
   UploadData: 'Upload Data',
   CodeEditor: 'Code Editor:',
   openCodeEditor:'Open Code Editor',
@@ -237,6 +239,8 @@ export interface Resources {
 }
 
 const zh: Resources['translation'] = {
+  UploadDataSuccessfully: '文件上传成功',
+  UploadDataFailed: '文件上传失败',
   UploadData: '上传数据',
   CodeEditor: '代码编辑:',
   openCodeEditor: '打开代码编辑器',

web/components/flow/node-renderer/upload.tsx

@@ -1,37 +1,67 @@
-import React from 'react';
+import React,{useState,useRef}from 'react';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';
-import { Button, Upload } from 'antd';
+import { Button, Upload,message } from 'antd';
 import { convertKeysToCamelCase } from '@/utils/flow';
 import { IFlowNodeParameter } from '@/types/flow';
 import { useTranslation } from 'react-i18next';
 
-const props: UploadProps = {
-  name: 'file',
-  action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
-  headers: {
-    authorization: 'authorization-text',
-  },
-};
-
 type Props = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
 };
-
 export const RenderUpload = (params: Props) => {
   const { t } = useTranslation();
+  const urlList =useRef<string[]>([]);
 
   const { data, defaultValue, onChange } = params;
 
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
+  const [uploading, setUploading] = useState(false);
 
+  const getUploadSuccessUrl = (url:string) => {
+    if (urlList.current.length === data.ui.attr.max_count) {
+      urlList.current.pop();
+    }
+    urlList.current.push(url)
+    console.log('上传数据'+urlList.current);
+    
+    onChange(urlList.current.toString())
+  }
+  const handleFileRemove = (file:any) => {
+    const index = urlList.current.indexOf(file.response.data[0].uri);
+    if (index !== -1) {
+      urlList.current.splice(index, 1);
+    }
+    onChange(urlList.current.toString())
+  }
+  const props: UploadProps = {
+    name: 'files',
+    action: process.env.API_BASE_URL + data.ui.action,
+    headers: {
+      'authorization': 'authorization-text',
+    },
+    onChange(info) {
+      setUploading(true)
+      if (info.file.status !== 'uploading') {
+        console.log(info.file, info.fileList);
+      }
+      if (info.file.status === 'done') {
+        setUploading(false)
+        message.success(`${info.file.response.data[0].file_name} ${t('UploadDataSuccessfully')}`);
+        getUploadSuccessUrl(info.file.response.data[0].uri)
+      } else if (info.file.status === 'error') {
+        setUploading(false)
+        message.error(`${info.file.response.data[0].file_name}  ${t('UploadDataFailed')}`);
+      }
+    },
+  };
   return (
     <div className="p-2 text-sm text-center">
-      <Upload {...attr}   {...props}>
-        <Button icon={<UploadOutlined />}>{t('UploadData')}</Button>
-      </Upload>
+    <Upload onRemove={handleFileRemove}  {...props} {...attr} multiple={false} accept={data.ui?.file_types}>
+      <Button   loading={uploading}  icon={<UploadOutlined />}>{t('UploadData')}</Button>
+    </Upload>
     </div>
   )
 

web/types/flow.ts

@@ -71,6 +71,8 @@ export type IFlowNodeParameter = {
 export type IFlowNodeParameterUI = {
   ui_type: string;
   language: string;
+  file_types: string;
+  action: string;
   attr: {
     disabled: boolean;
     [key: string]: any;