🐞 fix(字节码文件转换工具): 前端增加多文件上传以及自动转换

frontend/src/settings.js

@@ -90,7 +90,7 @@ export default {
             title: "字节码文件转换",
             name: "ByteCodeFile",
             icon: "gongzuotai",
-            path: "tool/evue",
+            path: "evue/index",
         },
         {
             vue: "app-store/docs.vue",

frontend/src/views/system/apps.vue

@@ -145,7 +145,12 @@
         </el-form-item>
         <el-form-item label="打包算法" prop="algorithm">
           <el-select v-model="post.algorithm">
-            <el-option v-for="(item, index) in aList" :label="item.name" :value="item.value" :key="index"></el-option>
+            <el-option
+              v-for="(item, index) in aList"
+              :label="item.name"
+              :value="item.value"
+              :key="index"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="应用名称" prop="app_name">
@@ -252,7 +257,7 @@ export default {
       list: [],
       aList: [
         { name: "zlib", value: "zlib" },
-        { name: "eheatshrink", value: "h" }
+        { name: "eheatshrink", value: "h" },
       ],
       selectList: [],
       categoryList: [],
@@ -315,11 +320,13 @@ export default {
         });
     },
     fetchCategory() {
-      getAppsList({ scope_type: "distinct" }).then(res => {
-        this.categoryList = res.data
-      }).catch(err => {
-        console.log(err.message)
-      })
+      getAppsList({ scope_type: "distinct" })
+        .then((res) => {
+          this.categoryList = res.data;
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
     },
     handleSizeChange(e) {
       this.form.pagesize = e;
@@ -388,14 +395,14 @@ export default {
       this.post.fileList.push(file);
     },
     handleUploadRemove(file, fileList) {
-      console.log(file, fileList);
+      console.log(fileList);
       for (let i = 0; i < this.post.app_files.length; i++) {
         if (this.post.app_files[i].uuid == file.response.data.uuid) {
           this.post.app_files.splice(i, 1);
           break;
         }
       }
-    //   this.post.app_files = fileList;
+      //   this.post.app_files = fileList;
     },
     handleLogoChange(file) {
       this.imageUrl = URL.createObjectURL(file.raw);
@@ -431,17 +438,18 @@ export default {
             this.$refs.logo.submit();
 
             let formData = new FormData();
-            this.post.fileList.forEach(item => {
-                formData.append("fileList", item.file)
+            this.post.fileList.forEach((item) => {
+              formData.append("fileList", item.file);
             });
-            formData.append("logo", this.post.logo.file)
-            Object.keys(this.post).forEach(k => {
-                if (this.post[k] && typeof this.post[k] !== "object") {
-                    formData.append(k, this.post[k])
-                }
+            formData.append("logo", this.post.logo.file);
+            Object.keys(this.post).forEach((k) => {
+              if (this.post[k] && typeof this.post[k] !== "object") {
+                formData.append(k, this.post[k]);
+              }
             });
 
-            addApp(formData).then((res) => {
+            addApp(formData)
+              .then((res) => {
                 this.$message({
                   type: "success",
                   message: `添加成功：${res.message}`,
@@ -450,9 +458,8 @@ export default {
               })
               .catch((err) => {
                 this.$message.error(err.message);
-              });              
-          }
-          else if (this.dialogTitle === "编辑") {
+              });
+          } else if (this.dialogTitle === "编辑") {
             updateApp(this.currentValue.uuid, this.post)
               .then((res) => {
                 // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
@@ -474,8 +481,11 @@ export default {
       });
     },
     onAdd() {
-      setTimeout(() => { this.clear(); }, 100);
-      this.post.sort = this.form.pagesize * (this.form.pagenum - 1) + this.list.length + 1;
+      setTimeout(() => {
+        this.clear();
+      }, 100);
+      this.post.sort =
+        this.form.pagesize * (this.form.pagenum - 1) + this.list.length + 1;
       this.dialogTitle = "添加";
       this.dialogVisible = true;
     },

frontend/src/views/system/evue.vue

 <template>
   <div class="app-container">
-    <el-alert title="EVUE文件转字节码文件" type="success"></el-alert>
+    <el-alert title="字节码文件在线转换" type="success"></el-alert>
     <div style="margin: 10px 0px">
       <el-form>
         <el-form-item>
           <el-upload
-            class="upload-demo"
-            action="/api/v1/evm_store/build"
             name="binfile"
             drag
             multiple
-            :on-success="handleUploaded"
-            :file-list="fileList"
+            ref="upload"
+            action="null"
+            :auto-upload="false"
+            :http-request="handleUploadFile"
+            :on-remove="handleUploadRemove"
           >
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">
               将文件拖到此处，或<em>点击上传</em>
             </div>
-            <div class="el-upload__tip" slot="tip">
-              请选择evue文件
-            </div>
+            <div class="el-upload__tip" slot="tip">请选择evue文件</div>
           </el-upload>
         </el-form-item>
+        <el-form-item>
+          <el-button @click="uploadFile">开始上传</el-button>
+        </el-form-item>
       </el-form>
     </div>
   </div>
 </template>
 <script>
-// import { postByteCodeFile } from "@/api/app-store";
+import { postByteCodeFile } from "@/api/app-store";
 
 export default {
   name: "ByteCodeFile",
@@ -48,20 +50,47 @@ export default {
     },
     handleUploaded(response) {
       if (response.code === 200) {
-        this.downloadFile(response)
+        this.downloadFile(response);
       } else {
-        this.$message.warning(response.message)
+        this.$message.warning(response.message);
+      }
+    },
+    handleUploadFile(file) {
+      this.fileList.push(file);
+    },
+    handleUploadRemove(file, fileList) {
+      console.log(fileList);
+      for (let i = 0; i < this.fileList.length; i++) {
+        if (this.fileList[i].uid == file.uid) {
+          this.fileList.splice(i, 1);
+          break;
+        }
       }
     },
     downloadFile(result) {
       const a = document.createElement("a");
-      a.download = result.data.filename
+      a.download = result.data.filename;
       a.href = result.data.url;
-      a.target = ""
+      a.target = "";
       a.click();
     },
-    getConvertString() {
-      console.log(123456789);
+    uploadFile() {
+      this.$refs.upload.submit();
+      let formData = new FormData();
+      this.fileList.forEach((item) => {
+        formData.append("binfile", item.file);
+      });
+      postByteCodeFile(formData)
+        .then((res) => {
+          if (res.code === 200) {
+            this.downloadFile(res);
+          } else {
+            this.$message.warning(res.message);
+          }
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        });
     },
   },
   mounted() {},