图片上传

web/src/views/pages/index.vue

@@ -77,7 +77,16 @@
                         <NInput v-model:value="modalForm.inheritor_age_count[2]" placeholder="请输入≥70岁传承人数量" style="width: 220px; margin-left: 10px;"/>
                     </n-form-item-gi>
                     <n-form-item-gi :span="24" class="form-item" label="非遗传承人等级证书" path="inheritor_certificates">
-                        <NInput v-model:value="modalForm.inheritor_certificates" placeholder="非遗传承人等级证书" />
+                        <n-upload
+                            :action="actionUrl"
+                            :default-file-list="modalForm.inheritor_certificates"
+                            list-type="image-card"
+                        >   
+                            <div>
+                                <img style="width: 24px; height: 24px;" src="@/assets/images/upload.png" alt="">
+                                <p style="font-size: 12px;">添加图片</p>
+                            </div>
+                        </n-upload>
                     </n-form-item-gi>
                     <n-form-item-gi :span="10" class="form-item" label="非遗等级" path="heritage_level">
                         <n-select v-model:value="modalForm.heritage_level" placeholder="非遗等级" :options="heritageOptions" />
@@ -92,10 +101,28 @@
                         <NInput v-model:value="modalForm.historical_evidence[3]" placeholder="请输入现代研究样本数量" style="width: 220px; margin-left: 10px;"/>
                     </n-form-item-gi>
                     <n-form-item-gi :span="24" class="form-item" label="非遗资产所用专利的证书" path="patent_certificates">
-                        <NInput v-model:value="modalForm.patent_certificates" placeholder="非遗资产所用专利的证书" />
+                        <n-upload
+                            :action="actionUrl"
+                            :default-file-list="modalForm.patent_certificates"
+                            list-type="image-card"
+                        >   
+                            <div>
+                                <img style="width: 24px; height: 24px;" src="@/assets/images/upload.png" alt="">
+                                <p style="font-size: 12px;">添加图片</p>
+                            </div>
+                        </n-upload>
                     </n-form-item-gi>
                     <n-form-item-gi :span="24" class="form-item" label="非遗纹样图片" path="pattern_images">
-                        <NInput v-model:value="modalForm.pattern_images" placeholder="非遗纹样图片" />
+                        <n-upload
+                            :action="actionUrl"
+                            :default-file-list="modalForm.pattern_images"
+                            list-type="image-card"
+                        >   
+                            <div>
+                                <img style="width: 24px; height: 24px;" src="@/assets/images/upload.png" alt="">
+                                <p style="font-size: 12px;">添加图片</p>
+                            </div>
+                        </n-upload>
                     </n-form-item-gi>
                 </n-grid>
                 <n-grid v-if="currentStep == 3" :cols="24" :x-gap="0">
@@ -189,7 +216,8 @@ const steps = [
   { title: '非遗应用与推广' },
   { title: '非遗资产衍生商品信息' }
 ];
-const currentStep = ref(0)
+const actionUrl = 'http://124.222.245.240:8080/api/v1/upload/upload/image'
+const currentStep = ref(2)
 const historyList = ref([
     {
         id: 0,
@@ -223,11 +251,11 @@ const modalForm = reactive({
     online_accounts: [],
     inheritor_level: null,
     inheritor_age_count: [],
-    inheritor_certificates: '',
+    inheritor_certificates: [],
     heritage_level: null,
     historical_evidence:[],
-    patent_certificates: '',
+    patent_certificates: [],
-    pattern_images: '',
+    pattern_images: [],
     patent_application_no: '',
 })
 const modalRules = {
@@ -631,7 +659,7 @@ const submit = () => {
         funding_status: fundingOptions.find(item => item.value === modalForm.funding_status).label,
         inheritor_level: fundingOptions2.find(item => item.value === modalForm.inheritor_level).label,
         // "inheritor_ages": [60, 42, 35],  # 传承人年龄
-        inheritor_certificates: ["http://example.com/国家级非遗传承人证书.jpg"],
+        inheritor_certificates: modalForm.inheritor_certificates,
         heritage_asset_level: heritageOptions.find(item => item.value === modalForm.heritage_level).label,
         inheritor_ages: modalForm.inheritor_age_count,
         historical_evidence: { 
@@ -640,8 +668,8 @@ const submit = () => {
             inheritor_testimony: modalForm.historical_evidence[3],
             modern_research: modalForm.historical_evidence[4]
         },
-        patent_certificates: ["http://example.com/专利证书1.jpg", "http://example.com/专利证书2.jpg"],
+        patent_certificates: modalForm.patent_certificates,
-        pattern_images: ["pattern1.jpg"],
+        pattern_images: modalForm.pattern_images,
         implementation_stage: maturityOptions.find(item => item.value === modalForm.application_maturity).label,
         coverage_area: coverageOptions.find(item => item.value === modalForm.application_coverage).label,
         collaboration_type: depthOptions.find(item => item.value === modalForm.cooperation_depth).label,