feat：加密上链步骤逻辑修改

package.json

@@ -16,6 +16,7 @@
     "core-js": "^3.6.5",
     "epic-spinners": "^1.1.0",
     "lodash": "^4.17.21",
+    "md5": "^2.3.0",
     "register-service-worker": "^1.7.1",
     "validator": "^13.6.0",
     "vant": "^2.12.22",
@@ -30,6 +31,7 @@
   "devDependencies": {
     "@types/async": "^3.2.7",
     "@types/lodash": "^4.14.170",
+    "@types/md5": "^2.3.1",
     "@types/validator": "^13.6.3",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",

src/components/common/Cell.vue

@@ -48,6 +48,7 @@
         <div class="flex flex-row items-center">
           <input
             @click="eventEmit(type)"
+            :disabled="true"
             v-if="$store.state.create.pickedList.length === 0"
             type="text"
             class="bg-transparent"

src/service/index.ts

 import { Common } from './common'
-import { NFTService } from './nftService'
+import { NFTService } from './nftService/nftService'
 import {UserService} from './userService'
 
 

src/service/nftService.ts → src/service/nftService/nftService.ts

-import { Service } from './Service'
+import { Service } from '../Service'
 
 import { token } from '@/util/userInfoUtils'
+import { iSaveData } from './types'
 export class NFTService extends Service {
   router = {
     getMyList: {
@@ -23,7 +24,10 @@ export class NFTService extends Service {
       path: '/label/list',
       dataType: 'application/x-www-form-urlencoded',
     },
-    ossPolicy: { path: '/oss/policy', dataType: 'application/x-www-form-urlencoded' },
+    ossPolicy: {
+      path: '/oss/policy',
+      dataType: 'application/x-www-form-urlencoded',
+    },
     getMd5: { path: '/nft/file/md5', dataType: 'multipart/form-data' },
     save: { path: '/nft/save', dataType: 'multipart/form-data' },
     publish: { path: '/nft/publish', dataType: 'application/json' },
@@ -31,69 +35,67 @@ export class NFTService extends Service {
       path: '/category/list',
       dataType: 'application/x-www-form-urlencoded',
     },
-    editCollection:{
+    editCollection: {
       path: '/collection/add',
-      dataType: 'application/x-www-form-urlencoded'
+      dataType: 'application/x-www-form-urlencoded',
     },
-    getCollectionList:{
+    getCollectionList: {
       path: '/collection/list',
       dataType: 'application/x-www-form-urlencoded',
-    }
+    },
   }
   constructor() {
     super()
-  
   }
 
-
-  private getAuth(){
-    return  'Bearer '+ token.getToken()
+  private getAuth() {
+    return 'Bearer ' + token.getToken()
   }
 
   /**
    * 获取NFT的详细信息
-   * @param id 
-   * @returns 
+   * @param id
+   * @returns
    */
-  async getNFTdetail(id: number):Promise<any>{
-      return await this.service.get(this.router.detail.path+'/'+id,{
-        headers: {
-          Authorization: this.getAuth(),
-          'Content-Type': this.router.detail.dataType,
-        },
-
-      })
+  async getNFTdetail(id: number): Promise<any> {
+    return await this.service.get(this.router.detail.path + '/' + id, {
+      headers: {
+        Authorization: this.getAuth(),
+        'Content-Type': this.router.detail.dataType,
+      },
+    })
   }
 
   /**
    * 操作用户的收藏夹
-   * @param id 
-   * @returns 
+   * @param id
+   * @returns
    */
-  async editCollection(id:number){
-    return await this.service.post(this.router.editCollection.path,{},{
-      headers: {
-        Authorization: this.getAuth(),
-        'Content-Type': this.router.editCollection.dataType,
+  async editCollection(id: number) {
+    return await this.service.post(
+      this.router.editCollection.path,
+      {},
+      {
+        headers: {
+          Authorization: this.getAuth(),
+          'Content-Type': this.router.editCollection.dataType,
+        },
+        params: {
+          id: id,
+        },
       },
-      params:{
-        id:id
-      }
-    })
+    )
   }
 
-
-  async getCollection():Promise<any[]>{
-
-    return await this.service.get(this.router.getCollectionList.path,{
+  async getCollection(): Promise<any[]> {
+    return await this.service.get(this.router.getCollectionList.path, {
       headers: {
         Authorization: this.getAuth(),
         'Content-Type': this.router.editCollection.dataType,
-      }
+      },
     })
   }
 
-
   /**
    *
    * @returns 获取剧目主题表
@@ -108,7 +110,7 @@ export class NFTService extends Service {
   }
   /**
    * 获取题材类型
-   * @returns 
+   * @returns
    */
   async getCategory(): Promise<any[]> {
     return await this.service.get(this.router.getCategory.path)
@@ -119,7 +121,7 @@ export class NFTService extends Service {
    * @param categoryId
    * @returns
    */
-  async getMyList(categoryId?: number):Promise<any> {
+  async getMyList(categoryId?: number): Promise<any> {
     return await this.service.get(this.router.getMyList.path, {
       headers: {
         Authorization: this.getAuth(),
@@ -182,7 +184,7 @@ export class NFTService extends Service {
 
   /**
    * 获取md5
-   * 
+   *
    */
   async getMd5(file: File) {
     const fd = new FormData()
@@ -198,19 +200,19 @@ export class NFTService extends Service {
   /**
    * 完成OSS签名
    */
-   async ossPolicy() {
+  async ossPolicy() {
     const ret = await this.service.get(this.router.ossPolicy.path, {
       headers: {
         Authorization: this.getAuth(),
         'Content-Type': this.router.ossPolicy.dataType,
       },
     })
-    return ret;
+    return ret
   }
 
-  async uploadFileToOss(file: File, data: any){
+  async uploadFileToOss(file: File, data: any) {
     const { accessid, dir, expire, host, policy, signature } = data as any
-    const fd = new FormData();
+    const fd = new FormData()
     fd.append('name', file.name)
     fd.append('key', dir + '${filename}')
     fd.append('policy', policy)
@@ -220,11 +222,9 @@ export class NFTService extends Service {
     fd.append('file', file)
     return await fetch(host, {
       method: 'POST',
-      body: fd, 
+      body: fd,
     })
   }
-  
-  
 
   /**
    * 发布
@@ -249,27 +249,13 @@ export class NFTService extends Service {
    * @param id
    */
 
-  async save(
-    author: string,
-    categoryId: number,
-    fileHash: string,
-    isArchives: number,
-    name: string,
-    synopsis: string,
-    theme: string,
-    file: File,
-    isGrant: number,
-  ) {
+  async save(data: iSaveData) {
     const fd = new FormData()
-    fd.append('author', author)
-    fd.append('categoryId', categoryId.toString())
-    fd.append('fileHash', fileHash)
-    fd.append('isArchives', isArchives.toString())
-    fd.append('name', name)
-    fd.append('synopsis', synopsis)
-    fd.append('theme', theme)
-    fd.append('file', file)
-    fd.append('isGrant', String(isGrant))
+
+    Object.keys(data).forEach((keyName) => {
+      const value = data[keyName as keyof iSaveData]
+      fd.append(keyName, typeof value === 'number' ? String(value) : value)
+    })
 
     return (await this.service.post(this.router.save.path, fd, {
       headers: {

src/service/nftService/types.ts

+export interface iSaveData {
+  author: string
+  categoryId: number
+  fileHash: string
+  isArchives: number
+  name: string
+  synopsis: string
+  theme: string
+  isGrant: number
+  fileUrl?: string
+  fileName?:string
+}

src/shimes-app.d.ts

 import Vue from 'vue'
 import { Common } from './service/common'
 import { Service } from './service/index'
-import { NFTService } from './service/nftService'
+import { NFTService } from './service/nftService/nftService'
 import { UserService } from './service/userService'
 import { UTIL_INTERFACE } from '@/util/util.types'
 import VueRouter, { Route } from 'vue-router'

src/view/NFT/Create/form.vue

@@ -176,6 +176,7 @@
 </template>
 
 <script lang="ts">
+import { iSaveData } from "@/service/nftService/types";
 import { Dialog } from "vant";
 import Vue from "vue";
 import { mapMutations, mapState } from "vuex";
@@ -248,11 +249,12 @@ export default Vue.extend({
     }),
     validation(): boolean {
       let disabled = true;
-      const { value_name, value_publisher } = this.createNFT;
+      const { value_name, value_publisher, value_des } = this.createNFT;
       if (this.currentStep === 1) {
         if (
           value_name &&
           value_publisher &&
+          value_des &&
           this.$store.state.create.pickedList.length !== 0
         ) {
           disabled = false;
@@ -314,46 +316,75 @@ export default Vue.extend({
     what(item: Function) {
       item(this.$router.push("/Nft/create/pick"));
     },
+    async publishNft() {
+      /* 加密上链的下一步点击回调 */
+      this.loading3 = true;
+      try {
+        await this.$service.nftService.publish({
+          fileHash: this.fileHash,
+          id: this.publish.id,
+          wallet: this.publish.wallet,
+          nftId: this.publish.nftId,
+        });
+        this.$router.back();
+      } catch (err) {
+        console.log(err);
+      }
+      this.loading3 = false;
+    },
+    async uploadFileToOss(file: File): Promise<string> {
+      const ossRet = (await this.$service.nftService.ossPolicy()) as any;
+      await this.$service.nftService.uploadFileToOss(file, ossRet);
+      const { dir, host } = ossRet;
+      return `${host}/${dir}/${file.name}`;
+    },
+    async encryptAndPushToChain() {
+      this.loading2 = true;
+      let mistake = false;
+      try {
+        let data = {
+          author: this.createNFT.value_publisher,
+          categoryId: 1,
+          name: this.createNFT.value_name,
+          synopsis: this.createNFT.value_des,
+          theme: this.pickedList.map((i: any) => i.text as string).toString(),
+        } as iSaveData;
+
+        if (this.createNFT.archives === 0) {
+          data = {
+            ...data,
+            fileHash: this.fileHash,
+            isArchives: this.createNFT.archives,
+          };
+        } else if (this.createNFT.archives === 1) {
+          const fileUrl = await this.uploadFileToOss(this.file);
+          data = {
+            ...data,
+            isArchives: this.createNFT.archives,
+            fileHash: this.fileHash,
+            fileUrl: fileUrl,
+            fileName: this.file.name,
+            isGrant: this.createNFT.grant,
+          };
+        }
+
+        const { id, nftId, wallet, fileHash } =
+          await this.$service.nftService.save(data);
+        this.publish.fileHash = fileHash;
+        this.publish.nftId = nftId;
+        this.publish.id = id;
+        this.publish.wallet = wallet;
+      } catch (err) {
+        mistake = true;
+      }
+      this.loading2 = false;
+      if (mistake) return;
+    },
     async currentStepChange(val: number) {
       if (this.currentStep === 2 && val === 1) {
-        this.loading2 = true;
-        let mistake = false;
-        try {
-          const { id, nftId, wallet, fileHash } =
-            await this.$service.nftService.save(
-              this.createNFT.value_publisher,
-              1,
-              this.fileHash,
-              this.createNFT.archives,
-              this.createNFT.value_name,
-              this.createNFT.value_des,
-              this.pickedList.map((i: any) => i.text as string).toString(),
-              this.file,
-              this.createNFT.grant
-            );
-          this.publish.fileHash = fileHash;
-          this.publish.nftId = nftId;
-          this.publish.id = id;
-          this.publish.wallet = wallet;
-        } catch (err) {
-          mistake = true;
-        }
-        this.loading2 = false;
-        if (mistake) return;
+        await this.encryptAndPushToChain();
       } else if (this.currentStep === 3 && val === 1) {
-        this.loading3 = true;
-        try {
-          await this.$service.nftService.publish({
-            fileHash: this.fileHash,
-            id: this.publish.id,
-            wallet: this.publish.wallet,
-            nftId: this.publish.nftId,
-          });
-          this.$router.back();
-        } catch (err) {
-          console.log(err);
-        }
-        this.loading3 = false;
+        await this.publishNft();
       }
       if (this.currentStep < this.mySteps.length + 1) {
         this.currentStep += val;

src/view/NFT/Create/upload.vue

@@ -78,6 +78,7 @@
 import Vue from "vue";
 import { Uploader, Loading } from "vant";
 import { mapMutations, mapState } from "vuex";
+import md5 from "md5";
 
 enum uploadStatus {
   NULL,
@@ -120,15 +121,22 @@ export default Vue.extend({
     }),
     async afterRead(file: File) {
       try {
+        const ab = await file.arrayBuffer();
+        const fileMd5 = md5(Buffer.from(ab));
         this.status = uploadStatus.uploading;
-        const ret = await this.$service.nftService.getMd5(file);
+        // const ossRet = await this.$service.nftService.ossPolicy();
+        // const uploadRet = await this.$service.nftService.uploadFileToOss(
+        //   file,
+        //   ossRet
+        // );
         this.setState({
           fileName: file.name,
-          fileHash: ret,
+          fileHash: fileMd5,
           file: file,
         });
         this.status = uploadStatus.success;
       } catch (err) {
+        console.log(err, "show err");
         this.status = uploadStatus.failed;
       }
     },