From 0bdd0a592dcbaa25fddd154d7fd7fc9fdf3e66db Mon Sep 17 00:00:00 2001
From: wanganmao <525987762@qq.com>
Date: Thu, 15 Dec 2022 14:00:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.js                             | 38 ++++++++++++++
 .../Creative/components/CreateMaterial.vue    | 52 ++++++++++++++++---
 2 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/src/api/common.js b/src/api/common.js
index 2d382df0..bd6905b1 100644
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -12,6 +12,44 @@ export default class CommonApi {
       url: '/console/files/credentials',
     });
   }
+  static async cosUpload3D(file) {
+    
+    const getRandomFileName = () => {
+      return `3D/upload/${new Date().getTime()}_${Math.floor( Math.random() * 1000 )}`;;
+    };
+
+    const name = getRandomFileName();
+    const { data } = await CommonApi.getOssInfo();
+    const param = {
+      region: data.Region,
+      host: data.Host,
+      sessionToken: data.sessionToken,
+      tmpSecretId: data.tmpSecretId,
+      tmpSecretKey: data.tmpSecretKey,
+      bucket: data.Bucket,
+      startTime: data.startTime,
+      expiredTime: data.expiredTime,
+      name: `${data.prefix}/${name}`,
+      file,
+    };
+    
+    try {
+      const location = await createCOS(param);
+      console.log('888', baseOss, name);
+      return {
+        // url: `${baseOss}/${name}`,
+        url: `https://${location}`,
+        name
+      };
+    } catch (error) {
+      console.log(error);
+      return {
+        url: '',
+        name: ''
+      };
+    }
+  }
+
   /**
  * 上传文件
  * @param {文件file} file
diff --git a/src/views/Creative/components/CreateMaterial.vue b/src/views/Creative/components/CreateMaterial.vue
index 3843ba6c..7e42331a 100644
--- a/src/views/Creative/components/CreateMaterial.vue
+++ b/src/views/Creative/components/CreateMaterial.vue
@@ -11,7 +11,7 @@
     </a-form>
     <a-form v-if="step==1" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" style="margin: 20px 0;">
       <a-form-item v-if="[THREE_D_TYPE.PANORAMA].includes(current.type)" label="上传图片">
-        <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model:file-list="formData.fileList">
+        <a-upload :customRequest="onCustomRequest" v-model:file-list="formData.fileList">
           <a-button>
             <upload-outlined></upload-outlined>
             上传
@@ -25,8 +25,7 @@
         <a-upload-dragger
           v-model:fileList="formData.fileList"
           name="file"
-          :multiple="true"
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          :customRequest="onCustomRequest"
           @change="handleChange"
         >
           <p class="ant-upload-drag-icon">
@@ -40,7 +39,7 @@
       </a-form-item>
       
       <a-form-item v-if="[THREE_D_TYPE.RING_3D].includes(current.type)" label="上传图片">
-        <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model:file-list="formData.fileList">
+        <a-upload :customRequest="onCustomRequest" multiple v-model:file-list="formData.fileList" :showUploadList="false">
           <a-button>
             <upload-outlined></upload-outlined>
             上传
@@ -49,15 +48,22 @@
         <p class="ant-upload-hint">
           图片格式、大小、数量要求：jpg、png格式，分辨率需保持一致，单个环物素材包最大支持上传500M，不多于40张。建议上传30~40张图片，单个环物素材包50M效果更佳。图片命名：图片名称后缀按照字母/数字升序命名（如，01、02、03…，以此类推，单反拍摄素材名可自动识别）。
         </p>
+        <div class="image-list">
+          <div class="image-list-item" v-for="(file, index) in formData.fileList" :key="index">
+            <img :src="file.response?.url" alt="">
+            <MinusCircleFilled class="del" @click="formData.fileList=formData.fileList.filter(x=>x!=file)"/>
+          </div>
+        </div>
       </a-form-item>
     </a-form>
   </a-modal>
 </template>
 
 <script setup>
-import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
+import { UploadOutlined, InboxOutlined, MinusCircleFilled } from '@ant-design/icons-vue';
 import { THREE_D_TYPE_S, THREE_D_TYPE } from "./CreateMaterial.constant"
 const { ref, reactive }=require("@vue/reactivity");
+import common from "@/api/common.js";
 
 const title = ref("")
 const visible = ref(false);
@@ -101,9 +107,18 @@ const handleChange = (info) => {
     message.error(`${info.file.name} file upload failed.`);
   }
 };
-const ok = () => {
+
+const onCustomRequest = async (upload) => {
+  const data = await common.cosUpload3D(upload.file);
+  console.log(data)
+  upload.onSuccess(data);
+}
+
+const ok = async () => {
   step.value++;
-  if(step.value >= 2) visible.value = false;
+  if(step.value >= 2) {
+    visible.value = false;
+  }
 }
 
 defineExpose({
@@ -122,4 +137,27 @@ defineExpose({
     font-size: 50px!important;
   }
 }
+.image-list{
+  .image-list-item{
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+    margin-right: 10px;
+    position: relative;
+    font-size: 40px;
+    img{
+      max-width: 100%;
+      max-height: 100%;
+    }
+    .del{
+      color: red;
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      :deep(*){
+        font-size: 20px;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file