封面，并解决了多个upload引起的bug

src/views/home/compositions/useManyValues.ts

@@ -308,6 +308,19 @@ export const useManyValues = () => {
       },
     ],
     product_pic_speech: "我们的产品正在促销热卖中，点点关注吧~",
+    cover_pic: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized.jpg",
+    cover_pic_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized.jpg",
+    cover_pic_with_text: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg",
+    cover_pic_with_text_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg",
+    cover_pic_titles: [
+      {
+        text: "猪猪们的冒险之旅",
+        color: "#000000",
+        bg_color: "#FFFFFF",
+        font_size: 60,
+        position: 0.37,
+      },
+    ],
   };
   
   return {

src/views/home/index.vue

@@ -73,8 +73,15 @@ const marketing_template = reactive({
   product_pic_with_text_local: "",
   product_pic_titles: <Wm.PicText[]>[],
   product_pic_speech: "",
+  if_need_cover_pic: "false",
+  cover_pic: "src/assets/waiting.png",
+  cover_pic_local: "",
+  cover_pic_with_text: "",
+  cover_pic_with_text_local: "",
+  cover_pic_titles: <Wm.PicText[]>[],
 });
-const previewMarketingTemplatePicTextVisible = ref(false);
+const previewMarketingTemplateProductPicTextVisible = ref(false);
+const previewMarketingTemplateCoverPicTextVisible = ref(false);
 
 
 onMounted(() => {
@@ -560,7 +567,7 @@ const onDrawOne = async (item: any) => {
 const onGenVideo = () => {
   if (!form.adapt_result_json || form.adapt_result_json.length == 0) {
     ElMessage({
-      message: "必要信息不能为空，请重新执行",
+      message: "分镜必要信息不能为空，请重新执行",
       type: "error",
     });
     return;
@@ -577,20 +584,31 @@ const onGenVideo = () => {
   });
   if (!is_all_ok) return;
   console.log(form.adapt_result_json);
-  const video_param_detail = form.adapt_result_json.map(item => {
-    return {
+  let video_param_detail = [];
+  // 封面
+  if (marketing_template.if_need_cover_pic == 'true' && marketing_template.cover_pic_with_text_local) {
+    video_param_detail.push({
+      idx: "0",
+      text: "",
+      img_path: marketing_template.cover_pic_with_text_local
+    })
+  };
+  // 分镜
+  form.adapt_result_json.map(item => {
+    video_param_detail.push({
       idx: item.编号,
       text: item.场景描述,
       img_path: item.local_image_path
-    };
+    })
   });
+  // 封底
   if (marketing_template.if_need_product_pic == 'true' && marketing_template.product_pic_with_text_local && marketing_template.product_pic_speech) {
     video_param_detail.push({
       idx: String(form.adapt_result_json.length + 1),
       text: marketing_template.product_pic_speech,
       img_path: marketing_template.product_pic_with_text_local
     })
-  }
+  };
   let para_rate = `${voice_rate.value}%`;
   let para_volume = `${voice_volume.value}%`;
   if (voice_rate.value >= 0) { para_rate = `+${para_rate}` }
@@ -663,11 +681,17 @@ const onChangeScreen = (val: string) => {
       form.final_video = default_data.vertical_data.final_video;
     }
     
+    marketing_template.if_need_product_pic = 'true';
     marketing_template.product_pic = default_data.marketing_template.product_pic;
     marketing_template.product_pic_local = default_data.marketing_template.product_pic_local;
     marketing_template.product_pic_with_text = default_data.marketing_template.product_pic_with_text;
     marketing_template.product_pic_with_text_local = default_data.marketing_template.product_pic_with_text_local;
-    marketing_template.if_need_product_pic = 'true';
+    
+    marketing_template.if_need_cover_pic = 'true';
+    marketing_template.cover_pic = default_data.marketing_template.cover_pic;
+    marketing_template.cover_pic_local = default_data.marketing_template.cover_pic_local;
+    marketing_template.cover_pic_with_text = default_data.marketing_template.cover_pic_with_text;
+    marketing_template.cover_pic_with_text_local = default_data.marketing_template.cover_pic_with_text_local;
 
   }
   marketing_template.product_name = default_data.marketing_template.product_name;
@@ -678,9 +702,12 @@ const onChangeScreen = (val: string) => {
   marketing_template.story_type = default_data.marketing_template.story_type;
   marketing_template.reference = default_data.marketing_template.reference;
   marketing_template.words_num = default_data.marketing_template.words_num;
+
   marketing_template.product_pic_titles = default_data.marketing_template.product_pic_titles;
   marketing_template.product_pic_speech = default_data.marketing_template.product_pic_speech;
 
+  marketing_template.cover_pic_titles = default_data.marketing_template.cover_pic_titles;
+
   // 宽高
   if (val == "横屏") {
     form.img_size = default_data.horizontal_img_size;
@@ -713,6 +740,7 @@ const actionUrl = ref(
 // 在分镜自定义上传图片时发现个bug
 // 第一次上传没问题，但重复进行上传，会更新到最后一行上去。
 // 奇怪，没找到原因。暂时先通过迂回的方法来处理。
+// 终于找到原因了，是handleUploadExceed的问题，它在超出limit后，清空已上传，并将新文件上传，但用的都是upload实例
 let uploadItemId = 0
 const onClickUpload=(val:any)=>{
   uploadItemId = val.编号 - 1
@@ -734,17 +762,16 @@ const handleUploadSuccess = (val: Wm.UploadResult) => {
     })
   }
 }
-
-const onClearOnePic = (item: any) => {
-  item.本镜配图 = "";
-  item.local_image_path = "";
-};
-
 const handleUploadExceed: UploadProps['onExceed'] = (files) => {
+  // 清除已上传的文件
   upload.value!.clearFiles()
+  // 获取超出限制的第一个文件
   const file = files[0] as UploadRawFile
+  // 给文件分配一个新的唯一标识
   file.uid = genFileId()
+  // 手动触发文件上传
   upload.value!.handleStart(file)
+  // 提交上传
   upload.value!.submit()
 }
 
@@ -755,6 +782,11 @@ const handleUploadError = (error: Error) => {
   });
 }
 
+const onClearOnePic = (item: any) => {
+  item.本镜配图 = "";
+  item.local_image_path = "";
+};
+
 const onPwdCheckDialog = () => {
   text2videoService
     .submitPwdCheck(pwdCheckValue.value)
@@ -800,8 +832,11 @@ const onDeleteOne = (item: any) => {
 //   activeTab.value = "second";
 // };
 
-const MarketingTemplateUploadSuccess = (val: Wm.UploadResult) => {
-  console.log(val)
+const upload_cover = ref<UploadInstance>()
+const upload_product = ref<UploadInstance>()
+
+const MarketingTemplateUploadProductPicSuccess = (val: Wm.UploadResult) => {
+  // console.log(val)
   if (val.code == 0) {
     marketing_template.product_pic = val.data[0].url + "?v=" + utils.genDateTimeStr();
     marketing_template.product_pic_local = val.data[0].path;
@@ -816,8 +851,59 @@ const MarketingTemplateUploadSuccess = (val: Wm.UploadResult) => {
     })
   }
 }
+const handleMarketingTemplateUploadProductPicExceed: UploadProps['onExceed'] = (files) => {
+  // 清除已上传的文件
+  upload_product.value!.clearFiles()
+  // 获取超出限制的第一个文件
+  const file = files[0] as UploadRawFile
+  // 给文件分配一个新的唯一标识
+  file.uid = genFileId()
+  // 手动触发文件上传
+  upload_product.value!.handleStart(file)
+  // 提交上传
+  upload_product.value!.submit()
+}
 
-const onAddMarketingTemplatePicText = () => {
+const MarketingTemplateUploadCoverPicSuccess = (val: Wm.UploadResult) => {
+  if (val.code == 0) {
+    marketing_template.cover_pic = val.data[0].url + "?v=" + utils.genDateTimeStr();
+    marketing_template.cover_pic_local = val.data[0].path;
+    ElMessage({
+      message: '上传成功',
+      type: 'success'
+    })
+  } else {
+    ElMessage({
+      message: '上传失败：'+val.message,
+      type: 'error'
+    })
+  }
+}
+const handleMarketingTemplateUploadCoverPicExceed: UploadProps['onExceed'] = (files) => {
+  // 清除已上传的文件
+  upload_cover.value!.clearFiles()
+  // 获取超出限制的第一个文件
+  const file = files[0] as UploadRawFile
+  // 给文件分配一个新的唯一标识
+  file.uid = genFileId()
+  // 手动触发文件上传
+  upload_cover.value!.handleStart(file)
+  // 提交上传
+  upload_cover.value!.submit()
+}
+
+const onClearMarketingTemplatePic = (type: string) => {
+  if (type == 'product') {
+    marketing_template.product_pic = 'src/assets/waiting.png';
+    marketing_template.product_pic_local = '';
+  };
+  if (type == 'cover') {
+    marketing_template.cover_pic = 'src/assets/waiting.png';
+    marketing_template.cover_pic_local = '';
+  };
+};
+
+const onAddMarketingTemplatePicText = (type: string) => {
   const newElement = {
     text: "新的文本",
     color: "#000000",
@@ -825,54 +911,105 @@ const onAddMarketingTemplatePicText = () => {
     font_size: 50,
     position: 0.5
   };
-  marketing_template.product_pic_titles.push(newElement);
+  if (type == 'product') {
+    marketing_template.product_pic_titles.push(newElement);
+  };
+  if (type == 'cover') {
+    marketing_template.cover_pic_titles.push(newElement);
+  };
 };
 
-
-const onMarketingTemplateAddTextToPic = async () => {
-  if (!marketing_template.product_pic_local) {
+const onMarketingTemplateAddTextToPic = async (type: string) => {
+  if ((type == 'product' && !marketing_template.product_pic_local)
+  || (type == 'cover' && !marketing_template.cover_pic_local)) {
     ElMessage({
       message: '请上传图片',
       type: 'error'
     })
     return false;
-  }
-  const texts = marketing_template.product_pic_titles.map(item => {
-    return {
-      text: item.text,
-      text_color: item.color ? item.color : '',
-      text_bg_color: item.bg_color ? item.bg_color : '',
-      font_size: String(item.font_size),
-      position: String(1 - item.position),
-      lang: 'zh',
+  };
+  if (type == 'product' && marketing_template.product_pic_titles.length==0) {
+    marketing_template.product_pic_with_text = marketing_template.product_pic;
+    marketing_template.product_pic_with_text_local = marketing_template.product_pic_local;
+    return true;
+  };
+  if (type == 'cover' && marketing_template.cover_pic_titles.length==0) {
+    marketing_template.cover_pic_with_text = marketing_template.cover_pic;
+    marketing_template.cover_pic_with_text_local = marketing_template.cover_pic_local;
+    return true;
+  };
+  let params = {};
+  if (type == 'product') {
+    const texts = marketing_template.product_pic_titles.map(item => {
+      return {
+        text: item.text,
+        text_color: item.color ? item.color : '',
+        text_bg_color: item.bg_color ? item.bg_color : '',
+        font_size: String(item.font_size),
+        position: String(1 - item.position),
+        lang: 'zh',
+      };
+    });
+    params = {
+      image_path: marketing_template.product_pic_local,
+      image_texts: texts,
+    };
+  };
+  if (type == 'cover') {
+    const texts = marketing_template.cover_pic_titles.map(item => {
+      return {
+        text: item.text,
+        text_color: item.color ? item.color : '',
+        text_bg_color: item.bg_color ? item.bg_color : '',
+        font_size: String(item.font_size),
+        position: String(1 - item.position),
+        lang: 'zh',
+      };
+    });
+    params = {
+      image_path: marketing_template.cover_pic_local,
+      image_texts: texts,
     };
-  });
-  const params = {
-    image_path: marketing_template.product_pic_local,
-    image_texts: texts,
   };
   try {
     const result = await text2videoService.submitAddTextToImg(params);
-    console.log(result);
-    marketing_template.product_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
-    marketing_template.product_pic_with_text_local = result.local_image_path;
+    // console.log(result);
+    if (type == 'product') {
+      marketing_template.product_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
+      marketing_template.product_pic_with_text_local = result.local_image_path;
+    }
+    if (type == 'cover') {
+      marketing_template.cover_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
+      marketing_template.cover_pic_with_text_local = result.local_image_path;
+    }
     return true;
   } catch (error) {
     ElMessage({
       message: String(error),
       type: "error",
     });
-    marketing_template.product_pic_with_text = "";
-    marketing_template.product_pic_with_text_local = "";
+    if (type == 'product') {
+      marketing_template.product_pic_with_text = "";
+      marketing_template.product_pic_with_text_local = "";
+    }
+    if (type == 'cover') {
+      marketing_template.cover_pic_with_text = "";
+      marketing_template.cover_pic_with_text_local = "";
+    }
     return false;
   }
 };
 
 
-const onPreviewMarketingTemplatePicText = async () => {
-  let res = await onMarketingTemplateAddTextToPic();
+const onPreviewMarketingTemplatePicText = async (type: string) => {
+  let res = await onMarketingTemplateAddTextToPic(type);
   if (!res) {return;}
-  previewMarketingTemplatePicTextVisible.value = true;
+  if (type == 'product') {
+    previewMarketingTemplateProductPicTextVisible.value = true;
+  }
+  if (type == 'cover') {
+    previewMarketingTemplateCoverPicTextVisible.value = true;
+  }
 };
 
 const onMarketingTemplateSubmitGpt = async () => {
@@ -894,7 +1031,12 @@ const onMarketingTemplateSubmitGpt = async () => {
   try {
     if (marketing_template.if_need_product_pic == 'true') {
       console.log("添加文字到图片")
-      let res = await onMarketingTemplateAddTextToPic();
+      let res = await onMarketingTemplateAddTextToPic('product');
+      if (!res) {return;}
+    }
+    if (marketing_template.if_need_cover_pic == 'true') {
+      console.log("添加文字到图片")
+      let res = await onMarketingTemplateAddTextToPic('cover');
       if (!res) {return;}
     }
     console.log("第一次提问")
@@ -1044,10 +1186,10 @@ const onMarketingTemplateSubmitGpt = async () => {
               <div style="margin: 5px 0"><el-button type="primary" size="small" @click="onAdaptOneScene(scope.row)">推理场景</el-button></div>
               <div style="margin: 5px 0"><el-button type="primary" size="small" @click="onAdaptOneSceneRoles(scope.row)">推理角色</el-button></div>
               <div style="margin: 5px 0"><el-button type="primary" size="small" @click="onDrawOne(scope.row)">绘图</el-button></div>
-              <el-upload class="upload-demo" ref="upload" list-type="picture" :show-file-list="false" :limit="1" 
+              <el-upload ref="upload" :show-file-list="false" :limit="1" 
                 accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP" 
                 :action="actionUrl" :on-success="handleUploadSuccess" :on-exceed="handleUploadExceed"
-                :on-error="handleUploadError" :data="{ item_id: scope.row.编号, width: form.img_size.width, height: form.img_size.height }">
+                :on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
                 <el-button type="primary" size="small" @click="onClickUpload(scope.row)">上传图片</el-button>
               </el-upload>
               <!-- <div style="margin: 5px 0"><el-button plain size="small" @click="onClearOnePic(scope.row)">清除图片</el-button></div> -->
@@ -1065,6 +1207,11 @@ const onMarketingTemplateSubmitGpt = async () => {
           </el-table-column>
         </el-table>
       </el-form-item>
+      <el-form-item label="封面" v-if="JSON.parse(marketing_template.if_need_cover_pic.toLowerCase()) && marketing_template.cover_pic_with_text_local">
+        <div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
+          <el-image :src="marketing_template.cover_pic_with_text" />
+        </div>
+      </el-form-item>
       <el-form-item label="封底" v-if="JSON.parse(marketing_template.if_need_product_pic.toLowerCase()) && marketing_template.product_pic_with_text_local">
         <div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
           <el-image :src="marketing_template.product_pic_with_text" />
@@ -1192,6 +1339,49 @@ const onMarketingTemplateSubmitGpt = async () => {
         <el-form-item label="文案字数">
           <el-input-number v-model="marketing_template.words_num" :min="10" :max="500" controls-position="right"/>
         </el-form-item>
+        <el-form-item label="封面图片">
+          <el-switch v-model="marketing_template.if_need_cover_pic" active-value="true" inactive-value="false" />
+        </el-form-item>
+        <div v-if="JSON.parse(marketing_template.if_need_cover_pic.toLowerCase())">
+          <el-form-item style="margin-left: 68px;">
+            <!-- :style="{ width: String(parseInt(form.img_size.width) / 3)+'px', height: String(parseInt(form.img_size.height) / 3)+'px' }" -->
+            <div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div">
+              <el-image :src="marketing_template.cover_pic" />
+            </div>
+          </el-form-item>
+          <el-form-item style="margin-left: 60px;">
+            <el-upload ref="upload_cover" :show-file-list="false" :limit="1" 
+              accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP" 
+              :action="actionUrl" :on-success="MarketingTemplateUploadCoverPicSuccess" :on-exceed="handleMarketingTemplateUploadCoverPicExceed"
+              :on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
+              <el-button type="primary" size="small" style="margin: 10px;">上传图片</el-button>
+            </el-upload>
+            <el-button type="danger" size="small" @click="onClearMarketingTemplatePic('cover')" style="margin-left: 15px;">清除图片</el-button>
+          </el-form-item>
+          <el-form-item label="图片文字">
+            <div style="width: 100%;">
+              <el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover')">增加</el-button>
+            </div>
+            <div v-for="(pic_title, index) in marketing_template.cover_pic_titles" :key="index" class="dashed-div">
+              <el-input v-model="pic_title.text" :autosize="true" type="textarea"></el-input>
+              <span style="margin-left:10px;">字体颜色：</span>
+              <el-color-picker v-model="pic_title.color" />
+              <span style="margin-left:30px;">字体背景：</span>
+              <el-color-picker v-model="pic_title.bg_color" />
+              <span style="margin-left:30px;">字体大小：</span>
+              <el-input-number v-model="pic_title.font_size" :min="1" :max="100" controls-position="right" />
+              <span style="margin-left:30px;">在图片上的位置：</span>
+              <el-slider v-model="pic_title.position" :step="0.01" :min="0" :max="1" show-input vertical height="100px" style="margin-top: 10px;"/>
+              <el-button type="danger" size="small" @click="marketing_template.cover_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除</el-button>
+            </div>
+            <el-button type="success" size="small" @click="onPreviewMarketingTemplatePicText('cover')">预览</el-button>
+            <el-dialog title="预览" v-model="previewMarketingTemplateCoverPicTextVisible" append-to-body :width="parseInt(form.img_size.width) / 2 + 40">
+              <div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
+                <el-image :src="marketing_template.cover_pic_with_text" />
+              </div>
+            </el-dialog>
+          </el-form-item>
+        </div>
         <el-form-item label="封底图片">
           <el-switch v-model="marketing_template.if_need_product_pic" active-value="true" inactive-value="false" />
         </el-form-item>
@@ -1203,17 +1393,17 @@ const onMarketingTemplateSubmitGpt = async () => {
             </div>
           </el-form-item>
           <el-form-item style="margin-left: 60px;">
-            <el-upload class="upload-demo" ref="upload" list-type="picture" :show-file-list="false" :limit="1" 
+            <el-upload ref="upload_product" :show-file-list="false" :limit="1" 
               accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP" 
-              :action="actionUrl" :on-success="MarketingTemplateUploadSuccess" :on-exceed="handleUploadExceed"
+              :action="actionUrl" :on-success="MarketingTemplateUploadProductPicSuccess" :on-exceed="handleMarketingTemplateUploadProductPicExceed"
               :on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
               <el-button type="primary" size="small" style="margin: 10px;">上传图片</el-button>
             </el-upload>
-            <el-button type="danger" size="small" @click="marketing_template.product_pic = 'src/assets/waiting.png';" style="margin-left: 15px;">清除图片</el-button>
+            <el-button type="danger" size="small" @click="onClearMarketingTemplatePic('product')" style="margin-left: 15px;">清除图片</el-button>
           </el-form-item>
           <el-form-item label="图片文字">
             <div style="width: 100%;">
-              <el-button type="primary" size="small" @click="onAddMarketingTemplatePicText">增加</el-button>
+              <el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product')">增加</el-button>
             </div>
             <div v-for="(pic_title, index) in marketing_template.product_pic_titles" :key="index" class="dashed-div">
               <el-input v-model="pic_title.text" :autosize="true" type="textarea"></el-input>
@@ -1227,8 +1417,8 @@ const onMarketingTemplateSubmitGpt = async () => {
               <el-slider v-model="pic_title.position" :step="0.01" :min="0" :max="1" show-input vertical height="100px" style="margin-top: 10px;"/>
               <el-button type="danger" size="small" @click="marketing_template.product_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除</el-button>
             </div>
-            <el-button type="success" size="small" @click="onPreviewMarketingTemplatePicText">预览</el-button>
-            <el-dialog title="预览" v-model="previewMarketingTemplatePicTextVisible" append-to-body :width="parseInt(form.img_size.width) / 2 + 40">
+            <el-button type="success" size="small" @click="onPreviewMarketingTemplatePicText('product')">预览</el-button>
+            <el-dialog title="预览" v-model="previewMarketingTemplateProductPicTextVisible" append-to-body :width="parseInt(form.img_size.width) / 2 + 40">
               <div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
                 <el-image :src="marketing_template.product_pic_with_text" />
               </div>