上传图片

src/api/modules/upload.ts

@@ -5,7 +5,7 @@ import { request } from '@/api'; // 引入你已封装的request
  * @param file 要上传的文件对象
  * @returns Promise<{ url: string }> 图片上传后的URL
  */
-export const uploadImageApi = (file: File): Promise<{ url: string }> => {
+export const uploadImageApi = (file: any): Promise<{ url: string }> => {
   // 构建FormData（图片上传必须用FormData格式）
   const formData = new FormData();
   formData.append('image', file); // 对应后端接收字段名image

src/views/trade/variety/index.vue

@@ -29,6 +29,18 @@
         @cancel="handleCancel" @close="handleClose">
         <VarietyForm :form-data="varietyForm" :form-rules="varietyFormRules" :form-items="dialogFormItemOptions"
             :options-map="varietyFormOptionsMap" :row-gutter="rowGutter" :col-span="colSpan" ref="varietyFormRef">
+            <template #upload="{ formData }">
+                <el-upload v-model:file-list="fileList" class="upload-demo" :http-request="handleUpload"
+                    :before-upload="beforeUpload" :limit="1">
+                    <el-button type="primary">点击上传</el-button>
+                    <template #tip>
+                        <div class="el-upload__tip">
+                            jpg/png格式 图片大小不能超过20KB
+                        </div>
+                    </template>
+                    <img v-if="dialogType === 'edit'" :src="formData.imageUrl" alt="预览图片" style="width: 100px; height: 100px;">
+                </el-upload>
+            </template>
         </VarietyForm>
     </VarietyDialog>
     <!-- dialog表格 -->
@@ -36,6 +48,7 @@
 </template>
 
 <script setup lang="ts">
+import type { UploadProps, UploadUserFile } from 'element-plus'
 // 组件
 import VarietySearch from '@/components/common/Search.vue'
 import VarietyTable from '@/components/common/Table.vue'
@@ -48,6 +61,8 @@ import { rules } from './rules'
 
 // 接口
 import { getVarietyListApi, getTradeGroupListApi, editVarietyApi, createVarietyApi } from '@/api/modules/trade/variety'
+// 上传图片
+import { uploadImageApi } from '@/api/modules/upload'
 
 /**
  * @description: 定义搜索数据
@@ -111,6 +126,10 @@ const varietyForm = ref({
     decimalPlaces: '',
     // 点差小数位   
     pointDecimalPlaces: '',
+    // 类型
+    type: '',
+    // 上传图片地址
+    imageUrl: '',
 })
 const varietyFormRef = ref<any>()
 const varietyFormRules = ref(rules())
@@ -141,7 +160,9 @@ const selectedRow = ref<any>(null)
 const rowGutter = ref(20)
 const colSpan = ref(12)
 
-const typeMap:any = {
+const fileList = ref([])
+
+const typeMap: any = {
     1: '金属',
     2: '能源',
     3: '指数',
@@ -177,6 +198,7 @@ const getVarietyList = async () => {
         shortStockFee: item.fee_inventory_short,
         profitLevel: item.stop_loss_level,
         type: typeMap[item.type],
+        image: item.image,
     }))
 }
 
@@ -226,6 +248,7 @@ const handleEdit = () => {
         decimalPlaces: row.decimal_place,
         // 点差小数位   
         pointDecimalPlaces: row.point_diff_decimal_place,
+        imageUrl: row.image,
     } as any
     //数据赋值完成后执行弹窗操作
     dialogVisible.value = true
@@ -239,31 +262,67 @@ const handleAdd = () => {
     dialogTitle.value = '添加合约品种'
     dialogType.value = 'add'
     varietyForm.value = {
-    varietyName: '',
-    varietyCode: '',
-    onlineStatus: 1,
-    tradeStatus: 1,
-    minPoint: '',
-    maxPoint: '',
-    contractSize: '',
-    minFlux: '',
-    unit: '',
-    tradeGroup: '',
-    longStockFee: '',
-    shortStockFee: '',
-    profitLevel: '',
+        varietyName: '',
+        varietyCode: '',
+        onlineStatus: 1,
+        tradeStatus: 1,
+        minPoint: '',
+        maxPoint: '',
+        contractSize: '',
+        minFlux: '',
+        unit: '',
+        tradeGroup: '',
+        longStockFee: '',
+        shortStockFee: '',
+        profitLevel: '',
 
-    id: '',
-    groupId: '',
-    prepaymentHedge: '',
-    prepaymentPercent: '',
-    decimalPlaces: '',
-    pointDecimalPlaces: '',
+        id: '',
+        groupId: '',
+        prepaymentHedge: '',
+        prepaymentPercent: '',
+        decimalPlaces: '',
+        pointDecimalPlaces: '',
+        // 类型
+        type: '',
+        // 上传图片地址
+        imageUrl: '',
+    }
+    fileList.value = []
+}
+
+/**
+ * @description: 上传图片
+ */
+// 自定义上传方法，调用你封装的接口
+const handleUpload = async (options: any) => {
+    const { file } = options
+    try {
+        const data = await uploadImageApi(file)
+        varietyForm.value.imageUrl = data.url
+
+        // 通知 el-upload 上传成功
+        options.onSuccess(data)
+    } catch (err) {
+        console.error('上传失败', err)
     }
 }
-/**
- * @description: 定义表格方法
- */
+
+// 上传前校验：格式 + 大小（20KB = 20 * 1024）
+const beforeUpload = (file: File) => {
+    const isTypeValid = file.type === 'image/jpeg' || file.type === 'image/png'
+    if (!isTypeValid) {
+        ElMessage.error('只能上传 JPG/PNG 格式！')
+        return false
+    }
+
+    const isSizeValid = file.size / 1024 < 20
+    if (!isSizeValid) {
+        ElMessage.error('图片大小不能超过 20KB！')
+        return false
+    }
+    return true
+}
+
 
 /**
  * @description: 定义弹窗方法
@@ -289,13 +348,17 @@ const handleSubmit = async () => {
         multiplier: varietyForm.value.contractSize,
         undulate_min: varietyForm.value.minFlux,
         online_status: varietyForm.value.onlineStatus,
+        type: Number(varietyForm.value.type),
+        image: varietyForm.value.imageUrl,
     }
+    console.log(params)
+    
     if (dialogType.value === 'edit') {
         console.log(params)
         await editVarietyApi(params)
         getVarietyList()
     } else {
-        await createVarietyApi({...params, group_id: varietyForm.value.tradeGroup})
+        await createVarietyApi({ ...params, group_id: varietyForm.value.tradeGroup })
         getVarietyList()
     }
     dialogVisible.value = false
@@ -328,4 +391,7 @@ const handleRowClick = (row: any) => {
         }
     }
 }
+:deep(.el-upload){
+    flex-direction: column;
+}
 </style>

src/views/trade/variety/options.ts

@@ -78,6 +78,8 @@ export const editDialogFormItem = [
     { prop: 'minFlux', label: '最小波动', type: 'input' as const, placeholder: '请输入最小波动' },
     // 类型
     { prop: 'type', label: '类型', type: 'select' as const, placeholder: '请选择类型' },
+    // 上传图片地址
+    { prop: 'imageUrl', slotName: 'upload', label: '上传图片' ,type: 'upload' as const},
     // 上下线状态
     { prop: 'onlineStatus', label: '上下线状态', type: 'switch' as const},
     // 交易状态

src/views/trade/variety/rules.ts

@@ -110,5 +110,13 @@ export const rules = (): FormRules => {
       { required: true, message: '请输入最小波动', trigger: ['blur', 'change'] },
       { validator: validateMaxFiveDecimals('最小波动')}
     ],
+    // 类型
+    type: [
+      { required: true, message: '请选择类型', trigger: ['blur', 'change'] }
+    ],
+    // 上传图片
+    imageUrl: [
+      { required: true, message: '请上传图片', trigger: ['blur', 'change'] }
+    ],
   }
 }