upload

index.html

@@ -6,6 +6,7 @@
     <meta name="keywords" content="DeNet web3">
     <meta name="description" content="Best Giveaway / Airdrop Web3 Tool, An Awesome Twitter Marketing Tool">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="referrer" content="no-referrer">
     <title>DeNet App</title>
     <!--preload-links-->
   </head>

src/pages/nft/add.vue

@@ -24,13 +24,14 @@
             <div class="r">
                 <div class="name">Card face</div>
                 <div class="face">
-                    <div class="off" v-if="false">
-                        <img src="../../static/img/icon-add-cover-off.svg" alt="" />
-                    </div>
-                    <div class="on" v-else>
+                    <input type="file" class="file" @change="uploadImg" accept="image/png,image/jpg,image/jpeg"  />
+                    <div class="on" v-if="isUpload">
                         <img src="../../static/img/icon-add-cover-on.svg" alt="" />
                         <img class="img" src="" alt="" />
                     </div>
+                    <div class="off" v-else>
+                        <img src="../../static/img/icon-add-cover-off.svg" alt="" />
+                    </div>
                 </div>
                 <div class="desc">Recommended size 500*500 or more</div>
                 <div class="name">Project Name</div>
@@ -63,15 +64,18 @@
             </div>
         </div>
         <div class="create">
-            <button>Create</button>
+            <button class="on" v-if="isNext" @click="next">Create</button>
+            <button class="off" v-else>Create</button>
         </div>
     </div>
 
     <div class="feedBack">
-        <div class="mail">
-            <img src="../../static/img/icon-feedback.svg" alt="" />
-        </div>
-        <div class="font">Feedback</div>
+        <a href="mailto:service@cybertogether.net">
+            <div class="mail">
+                <img src="../../static/img/icon-feedback.svg" alt="" />
+            </div>
+            <div class="font">Feedback</div>
+        </a>
     </div>
 
     <div class="loading" v-if="showLoading">
@@ -87,10 +91,34 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Api from '../../static/http/api';
+import { postRequest } from '../../static/http';
+import { uploadFile } from '../../static/utils/upload'
 
+const isNext = ref(false);
+const isUpload = ref(false);
 const showLoading = ref(false);
-const showSuccess = ref(false)
+const showSuccess = ref(false);
+
+const getConfig = () => {
+    postRequest(Api.createConfig).then(res => {})
+}
+
+const next = () => {}
+
+const uploadImg = (e: any) => {
+    let file = e.target.files[0];
+    // 清空file
+    e.target.value = '';
+    
+    uploadFile(file);
+}
+
+onMounted(() => {
+    // config
+    getConfig()
+})
 </script>
 
 
@@ -200,7 +228,16 @@ const showSuccess = ref(false)
         .r {
             width: 520px;
             .face {
+                position: relative;
+                width: 80px;
                 margin-bottom: 10px;
+                .file {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    opacity: 0;
+                    cursor: pointer;
+                }
                 .off {
                     display: flex;
                     align-items: center;
@@ -323,7 +360,7 @@ const showSuccess = ref(false)
         box-sizing: border-box;
         background-color: #fff;
         border-top: solid 1px #ECECEC;
-        button {
+        .on {
             border: 0;
             height: 50px;
             color: #FFFFFF;
@@ -335,6 +372,18 @@ const showSuccess = ref(false)
             border-radius: 25px;
             background: #1D9BF0;
         }
+        .off {
+            border: 0;
+            height: 50px;
+            color: #FFFFFF;
+            cursor: pointer;
+            padding: 0 50px;
+            font-size: 18px;
+            font-weight: 700;
+            letter-spacing: 0.3px;
+            border-radius: 25px;
+            background: #E4E4E4;
+        }
     }
 }
 
@@ -344,6 +393,10 @@ const showSuccess = ref(false)
     bottom: 88px;
     cursor: pointer;
     text-align: center;
+    a:link, a:visited {
+        color: #A8A8A8;
+        text-decoration: none;
+    }
     .mail {
         display: flex;
         align-items: center;

src/static/http/api.ts

@@ -5,4 +5,6 @@ export default {
     'userNftDel' : '/denet/nft/project/create/delete',
     'userNftList' : '/denet/nft/project/create/list',
     'userNftSetStatus' : '/denet/nft/project/create/setPublishStatus',
+    'createConfig' : '/denet/nft/project/create/config',
+    'mediaUpload' : '/denet/media/uploadSignature',
 }

src/static/utils/upload.ts

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import Api from '../http/api';
+import { postRequest } from '../http'
+
+export const uploadFile = async (file: any) => {
+    let imgInfo = await getImgInfo(file);
+    let uploadRes = await upload(imgInfo, file);
+    console.log(333, uploadRes)
+}
+
+const getImgInfo = (file: any) => {
+    return new Promise((resolve, reject) => {
+        let type = file.type || 'image/jpg';
+        postRequest(Api.mediaUpload, {
+            params: {
+                bizType: 2,
+                contentType: type,
+                fileSuffix: type.split('/')[1],
+                fileType: 1,
+            }
+        }).then(res => {
+            let { code, data } = res;
+            if ( code === 0 ) {
+                resolve(data)
+            }
+        }).catch(error => {
+            reject(error)
+        })
+    })
+}
+ 
+const upload = (params: any, file: any) => {
+    let type = file.type || 'image/jpg';
+    return new Promise((resolve, reject) => {
+        axios({
+            method: 'PUT',
+            url: params.url,
+            data: new Blob([file]),
+            headers: {
+                'Authorization': params.authorization,
+                'x-amz-date': params.date,
+                'Content-Type': type,
+            }
+        }).then(res => {
+            resolve(res)
+        }).catch(error => {
+            reject(error)
+        })
+    })
+}