fix: 上传功能

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

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>