upload

src/pages/nft/add.vue

@@ -8,7 +8,7 @@
                     <div class="show">
                         <div class="card" :class="selectItem.modelName">
                             <div class="logo">
-                                <img v-if="uploadItem && uploadItem.imagePath" :src="uploadItem.imagePath" alt="">
+                                <img v-if="tempUrl" :src="tempUrl" alt="">
                             </div>
                             <div class="member">{{ projectName === '' ? 'xxxx' : projectName }}</div>
                             <div class="number">{{ projectNo === '' ? '0000' : projectNo }}</div>
@@ -34,9 +34,9 @@
                 <div class="name">Card face</div>
                 <div class="face">
                     <input type="file" class="file" @change="uploadImg" accept="image/png,image/jpg,image/jpeg"  />
-                    <div class="on" v-if="uploadItem && uploadItem.imagePath">
+                    <div class="on" v-if="tempUrl">
                         <img src="../../static/img/icon-add-cover-on.svg" alt="" />
-                        <img class="img" :src="uploadItem.imagePath" alt="" />
+                        <img class="img" :src="tempUrl" alt="" />
                     </div>
                     <div class="off" v-else>
                         <img src="../../static/img/icon-add-cover-off.svg" alt="" />
@@ -140,6 +140,8 @@ const projectNo = ref('');
 const projectPrice = ref('');
 const showNoStr = ref(false);
 const showMinPrice = ref(false);
+const tempFile = ref('');
+const tempUrl = ref('');
 const buttonType = {
     feedback: 'feedback-button',
     create: 'create-button',
@@ -168,43 +170,49 @@ const getConfig = () => {
 const next = () => {
     // show loading
     showLoading.value = true;
-    // post 
-    postRequest(Api.userNftAdd, {
-        params: {
-            // 项目图标
-            cardFaceImagePath: uploadItem.value && uploadItem.value.objectKey || '',
-            // 发行数量
-            nftCollectionSize: projectSize.value || '',
-            // 选中的模版id
-            nftItemImageModel: selectItem.value && selectItem.value.modelName || '',
-            // 项目描述
-            nftProjectDescription: projectDesc.value || '',
-            // 项目名称
-            nftProjectName: projectName.value || '',
-            // 销售价格
-            saleCurrencyAmount: projectPrice.value || '',
-            // 销售的货币code
-            saleCurrencyCode: currencyItem.value && currencyItem.value.currencyCode || '',
-        }
-    }).then(res => {
-        if (res.code === 0) {
-            showSuccess.value = true;
-        }
-    }).finally(() => {
-        showLoading.value = false;
-    })
-
-    // Report
-    Report({
-        baseInfo: {
-            pageSource: pageSource.creatorPage,
-        },
-        params: {
-            eventData: {
-                businessType: businessType.buttonClick,
-                objectType: buttonType.create,
+    uploadFile(tempFile.value).then(res => {
+        // @ts-ignore
+        uploadItem.value = res;
+        // post 
+        postRequest(Api.userNftAdd, {
+            params: {
+                // 项目图标
+                cardFaceImagePath: uploadItem.value && uploadItem.value.objectKey || '',
+                // 发行数量
+                nftCollectionSize: projectSize.value || '',
+                // 选中的模版id
+                nftItemImageModel: selectItem.value && selectItem.value.modelName || '',
+                // 项目描述
+                nftProjectDescription: projectDesc.value || '',
+                // 项目名称
+                nftProjectName: projectName.value || '',
+                // 销售价格
+                saleCurrencyAmount: projectPrice.value || '',
+                // 销售的货币code
+                saleCurrencyCode: currencyItem.value && currencyItem.value.currencyCode || '',
             }
-        }
+        }).then(res => {
+            if (res.code === 0) {
+                showSuccess.value = true;
+            }
+        }).finally(() => {
+            showLoading.value = false;
+        })
+
+        // Report
+        Report({
+            baseInfo: {
+                pageSource: pageSource.creatorPage,
+            },
+            params: {
+                eventData: {
+                    businessType: businessType.buttonClick,
+                    objectType: buttonType.create,
+                }
+            }
+        })
+    }).catch(() => {
+        showLoading.value = false;
     })
 }
 
@@ -256,11 +264,9 @@ const uploadImg = (e: any) => {
     let file = e.target.files[0];
     // 清空file
     e.target.value = '';
-    // upload 
-    uploadFile(file).then(res => {
-        // @ts-ignore
-        uploadItem.value = res;
-    })
+    // 预览
+    tempFile.value = file;
+    tempUrl.value = URL.createObjectURL(file);
 }
 
 const hideSuccess = () => {
@@ -316,7 +322,7 @@ watchEffect(() => {
     showNoStr.value = projectNo.value != '';
 
     // 是否可以创建
-    let ifUpload = uploadItem.value && uploadItem.value.objectKey || false;
+    let ifUpload = tempUrl.value != '' || false;
     let ifName = projectName.value !== '';
     let ifDesc = projectDesc.value !== '';
     let ifSize = projectSize.value !== '' && Number(projectSize.value) > 0;
@@ -592,6 +598,7 @@ onMounted(() => {
                     position: absolute;
                     left: 0;
                     top: -22px;
+                    font-size: 12px;
                     color: #E29015;
                 }
             }