fix: .

packages/qjkankan-editor/src/utils/file.js

@@ -1,46 +1,44 @@
 // 媒体名称
 export const mediaTypes = {
-    "image": '图片',
-    "video": "视频",
-    "audio": "音频"
-}
+  image: "图片",
+  video: "视频",
+  audio: "音频",
+};
 
 // 媒体扩展类型
 export const mediaMimes = {
-    "image": ["jpg", "png", "jpeg", "bmp", "gif"],
-    "audio": ["mp3", "aac", "ogg", "wav" /* , "m4a" */],
-    "video": ["mp4", "mov", "quicktime" /* ,"webm", "rmvb", "wmv" */] //ios:mov
-}
+  image: ["jpg", "png", "jpeg", "bmp", "gif"],
+  audio: ["mp3", "aac", "ogg", "wav" /* , "m4a" */],
+  video: ["mp4", "mov", "quicktime" /* ,"webm", "rmvb", "wmv" */], //ios:mov
+};
 
 // 媒体大小显示(MB)
 export const mediaMaxSize = {
-    "image": 10,
-    "video": 20,
-    "audio": 5
-}
+  image: 10,
+  video: 20,
+  audio: 5,
+};
 
 /**
  * 获取媒体扩展类型
  * @param {Stirng} filename 文件名称
  */
-export const getMime = filename => {
-    if (!filename || filename.indexOf('.') === -1) {
-        return ''
-    }
+export const getMime = (filename) => {
+  if (!filename || filename.indexOf(".") === -1) {
+    return "";
+  }
 
-    return filename.split('.').pop().toLowerCase()
-}
+  return filename.split(".").pop().toLowerCase();
+};
 
 /**
  * 在路径中获取文件名
- * @param {*} path 
+ * @param {*} path
  */
-export const getFilename = path => {
-    const segment = (path || '').split('/')
-    return segment[segment.length - 1]
-}
-
-
+export const getFilename = (path) => {
+  const segment = (path || "").split("/");
+  return segment[segment.length - 1];
+};
 
 /**
  * 检测媒体文件是否超过预设限制
@@ -48,18 +46,16 @@ export const getFilename = path => {
  * @param {Number} size 文件大小
  */
 export const checkSizeLimit = (type, size) => {
+  size = size / 1024 / 1024;
 
-    size = size / 1024 / 1024
-
-    return size <= mediaMaxSize[type]
-}
+  return size <= mediaMaxSize[type];
+};
 
 export const checkSizeLimitFree = (size, limit) => {
+  size = size / 1024 / 1024;
 
-    size = size / 1024 / 1024
-
-    return size <= limit
-}
+  return size <= limit;
+};
 
 /**
  * 检测媒体类型
@@ -67,80 +63,107 @@ export const checkSizeLimitFree = (size, limit) => {
  * @param {String} filename 文件名称
  */
 export const checkMediaMime = (type, filename) => {
-    const mime = getMime(filename)
-    const find = mediaMimes[type]
-    if (!find) {
-        return false
-    }
-
-    return find.indexOf(mime) !== -1
-}
-
-export const base64ToBlob = base64 => {
-    let arr = base64.split(','),
-        mime = arr[0].match(/:(.*?);/)[1],
-        bstr = atob(arr[1]),
-        n = bstr.length,
-        u8arr = new Uint8Array(n);
-    while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-    }
-    return new Blob([u8arr], { type: mime });
-}
-
-export const base64ToDataURL = base64 => {
-    return window.URL.createObjectURL(base64ToBlob(base64));
-}
+  const mime = getMime(filename);
+  const find = mediaMimes[type];
+  if (!find) {
+    return false;
+  }
+
+  return find.indexOf(mime) !== -1;
+};
+
+export const base64ToBlob = (base64) => {
+  let arr = base64.split(","),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+};
+
+export const base64ToDataURL = (base64) => {
+  return window.URL.createObjectURL(base64ToBlob(base64));
+};
 
 export const blobToBase64 = function (blob) {
-    return new Promise(resolve => {
-        var reader = new FileReader();
-        reader.onload = function () {
-            resolve(reader.result);
-        };
-        reader.readAsDataURL(blob);
-    })
+  return new Promise((resolve) => {
+    var reader = new FileReader();
+    reader.onload = function () {
+      resolve(reader.result);
+    };
+    reader.readAsDataURL(blob);
+  });
 };
 
 /**
  * 获取图片文件尺寸
- * @param {*} file 
+ * @param {*} file
  */
 export const getImgWH = (file) => {
-  return new Promise((resolve) => {
-    var reader = new FileReader()
+  return new Promise((resolve, reject) => {
+    var reader = new FileReader();
     //读取图片文件
-    reader.readAsDataURL(file)
-    reader.onload = function (e) {
-      //初始化JavaScript图片对象
-      var image = new Image()
-      //FileReader获得Base64字符串
-      image.src = e.target.result
-      image.onload = function () {
-        //获得图片高宽
-        var height = this.height
-        var width = this.width
-        resolve({
-          height,
-          width
-        })
-      }
-    }
-  })
-}
-
+    let url = URL.createObjectURL(file);
+    console.error(url);
+
+    var image = new Image();
+    //FileReader获得Base64字符串
+    image.src = url;
+    image.onload = function () {
+      console.log("图片加载成功");
+      //获得图片高宽
+      var height = this.height;
+      var width = this.width;
+      resolve({
+        height,
+        width,
+      });
+    };
+    image.onerror = function (e) {
+      reject({ message: "loadFile Error" });
+    };
+
+    // reader.readAsDataURL(file);
+    // reader.onload = function (e) {
+    //   //初始化JavaScript图片对象
+    //   var image = new Image();
+    //   //FileReader获得Base64字符串
+    //   image.src = e.target.result;
+    //   image.onload = function () {
+    //     console.error("图片加载成功");
+    //     //获得图片高宽
+    //     var height = this.height;
+    //     var width = this.width;
+    //     resolve({
+    //       height,
+    //       width,
+    //     });
+    //   };
+    //   image.onerror = function (e) {
+    //     console.error("图片加载失败",e);
+    //     reject({
+    //       height: 0,
+    //       width: 0,
+    //     });
+    //   };
+    // };
+  });
+};
 
 /**
  * 转化字节单位
- * @param {*} file 
+ * @param {*} file
  */
 export const changeByteUnit = (x) => {
-    const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    let l = 0, n = parseInt(x, 10) || 0;
-
-    while (n >= 1024 && ++l) {
-        n = n / 1024;
-    }
-    return (n.toFixed(n < 10 && l > 0 ? 2 : 0) + units[l]);
-
-}
+  const units = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  let l = 0,
+    n = parseInt(x, 10) || 0;
+
+  while (n >= 1024 && ++l) {
+    n = n / 1024;
+  }
+  return n.toFixed(n < 10 && l > 0 ? 2 : 0) + units[l];
+};

packages/qjkankan-editor/src/views/material/pano/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="panorama con">
     <div class="top">
-      <crumbs
-        v-if="!lastestUsedSearchKey"
-        :list="folderPath"
-        :rootName="$i18n.t('gather.pano')"
-        @click-path="onClickPath"
-      />
+      <crumbs v-if="!lastestUsedSearchKey" :list="folderPath" :rootName="$i18n.t('gather.pano')" @click-path="onClickPath" />
       <div v-if="lastestUsedSearchKey" class="">
         {{ $i18n.t("gather.pano") }}
       </div>
@@ -14,52 +9,24 @@
     <div class="second-line" :class="{ disabled: searchKey }">
       <template>
         <div class="btn">
-          <button
-            @mouseover.stop="showList = true"
-            @click="onUploadFile"
-            class="ui-button submit"
-          >
+          <button @mouseover.stop="showList = true" @click="onUploadFile" class="ui-button submit">
             <span>{{ upload_material }}</span>
             <i class="iconfont icon-help_i" v-tooltip="pano_size" />
-            <upload
-              ref="uploadFile"
-              :failString="pano_fail"
-              :limitFailStr="pano_limit"
-              accept-type=".jpg"
-              media-type="image"
-              :limit="300"
-              @file-change="onFileChange"
-            ></upload>
+            <upload ref="uploadFile" :failString="pano_fail" :limitFailStr="pano_limit" accept-type=".jpg" media-type="image" :limit="300" @file-change="onFileChange"></upload>
           </button>
         </div>
         <button class="ui-button submit" @click="isShowNewFolder = true">
           {{ $i18n.t(`gather.new_folder`) }}
         </button>
-        <button
-          class="ui-button cancel"
-          :class="{ disable: selectedList.length === 0 }"
-          @click="onClickMoveFolder"
-        >
+        <button class="ui-button cancel" :class="{ disable: selectedList.length === 0 }" @click="onClickMoveFolder">
           {{ $i18n.t(`gather.move_folder`) }}
         </button>
       </template>
       <div class="filter">
-        <div
-          :class="{ active: isFilterFocus }"
-          @focusin="onFilterFocus"
-          @focusout="onFilterBlur"
-        >
+        <div :class="{ active: isFilterFocus }" @focusin="onFilterFocus" @focusout="onFilterBlur">
           <i class="iconfont icon-works_search search"></i>
-          <input
-            type="text"
-            v-model="searchKey"
-            :placeholder="search_material"
-          />
-          <i
-            v-if="searchKey"
-            @click="searchKey = ''"
-            class="iconfont icon-toast_red del"
-          ></i>
+          <input type="text" v-model="searchKey" :placeholder="search_material" />
+          <i v-if="searchKey" @click="searchKey = ''" class="iconfont icon-toast_red del"></i>
         </div>
       </div>
     </div>
@@ -84,46 +51,28 @@
           {{ headerItem.name && $i18n.t(`table.${headerItem.name}`) }}
         </div>
         <!-- 内容各单元格 -->
-        <div
-          slot-scope="{ itemData, lineData, headerItem }"
-          slot="tableItem"
-          style="width: 100%"
-        >
+        <div slot-scope="{ itemData, lineData, headerItem }" slot="tableItem" style="width: 100%">
           <!-- 操作型单元格 -->
           <div class="handle" v-if="headerItem.canclick">
-            <i
-              v-if="lineData.type !== 'dir'"
-              class="iconfont icon-material_operation_image hover-tips"
-              @click="(showCover = true), (popupItem = lineData)"
-            >
+            <i v-if="lineData.type !== 'dir'" class="iconfont icon-material_operation_image hover-tips" @click="(showCover = true), (popupItem = lineData)">
               <div>
                 <div class="remark">{{ edit_cover }}</div>
               </div>
             </i>
 
-            <i
-              class="iconfont icon-material_operation_editor hover-tips"
-              @click="onClickRename(lineData)"
-            >
+            <i class="iconfont icon-material_operation_editor hover-tips" @click="onClickRename(lineData)">
               <div>
                 <div class="remark">{{ rename }}</div>
               </div>
             </i>
-            <i
-              class="iconfont icon-material_operation_delete hover-tips-warn"
-              @click="del(lineData)"
-            >
+            <i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(lineData)">
               <div>
                 <div class="remark">{{ deltips }}</div>
               </div>
             </i>
           </div>
           <!-- 图片型单元格 -->
-          <div
-            v-else-if="headerItem.type == 'image' && lineData.type !== 'dir'"
-            class="img"
-            @click="previewImage(lineData)"
-          >
+          <div v-else-if="headerItem.type == 'image' && lineData.type !== 'dir'" class="img" @click="previewImage(lineData)">
             <template v-if="Number(lineData.status) == 3">
               <img :src="itemData + $imgsuffix" alt="" />
             </template>
@@ -131,15 +80,8 @@
               <img src="@/assets/img/list_placeholder.png" alt="" />
             </template>
           </div>
-          <div
-            v-else-if="headerItem.type == 'image' && lineData.type === 'dir'"
-            class="img dirIcon"
-          >
-            <img
-              :src="require('@/assets/images/icons/folder-blue.png')"
-              alt=""
-              @click="onClickFolder(lineData)"
-            />
+          <div v-else-if="headerItem.type == 'image' && lineData.type === 'dir'" class="img dirIcon">
+            <img :src="require('@/assets/images/icons/folder-blue.png')" alt="" @click="onClickFolder(lineData)" />
           </div>
 
           <!-- 文字型单元格 -->
@@ -149,11 +91,7 @@
               <!-- 不是搜索出来的 -->
               <div v-if="!lastestUsedSearchKey" class="not-search-res">
                 <!-- 文件夹名称 -->
-                <div
-                  v-if="lineData.type === 'dir'"
-                  class="dirName"
-                  @click="onClickFolder(lineData)"
-                >
+                <div v-if="lineData.type === 'dir'" class="dirName" @click="onClickFolder(lineData)">
                   {{ itemData || "-" }}
                 </div>
                 <!-- 素材名称 -->
@@ -172,15 +110,7 @@
                   </div>
                   <div class="parent-name-wrap">
                     {{ $i18n.t("gather.dir") }}
-                    <span
-                      class="parent-name"
-                      @click="onClickParentFolder(lineData)"
-                      >{{
-                        lineData.dirId === 1
-                          ? $i18n.t("gather.root_dir")
-                          : lineData.dirName
-                      }}</span
-                    >
+                    <span class="parent-name" @click="onClickParentFolder(lineData)">{{ lineData.dirId === 1 ? $i18n.t("gather.root_dir") : lineData.dirName }}</span>
                   </div>
                 </div>
                 <!-- 素材名称 -->
@@ -190,15 +120,7 @@
                   </div>
                   <div class="parent-name-wrap">
                     {{ $i18n.t("gather.dir") }}
-                    <span
-                      class="parent-name"
-                      @click="onClickParentFolder(lineData)"
-                      >{{
-                        lineData.dirId === 1
-                          ? $i18n.t("gather.root_dir")
-                          : lineData.dirName
-                      }}</span
-                    >
+                    <span class="parent-name" @click="onClickParentFolder(lineData)">{{ lineData.dirId === 1 ? $i18n.t("gather.root_dir") : lineData.dirName }}</span>
                   </div>
                 </div>
               </div>
@@ -216,27 +138,15 @@
         </div>
       </tableList>
 
-      <UploadTaskList
-        class="upload-task-list"
-        fileType="IMAGE"
-        :taskList="uploadListForUI"
-        :targetFolderId="lastestUsedSearchKey ? -1 : currentFolderId"
-        @cancel-task="onCancelTask"
-      />
+      <UploadTaskList class="upload-task-list" fileType="IMAGE" :taskList="uploadListForUI" :targetFolderId="lastestUsedSearchKey ? -1 : currentFolderId" @cancel-task="onCancelTask" />
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">
         {{ had_load }}
       </div>
-      <div
-        class="nodata"
-        v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey"
-      >
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
         <span>{{ no_search_result }}</span>
       </div>
-      <div
-        class="nodata"
-        v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey"
-      >
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
         <img :src="config.empty" alt="" />
         <span>{{ no_material_result }}</span>
         <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">
@@ -245,44 +155,12 @@
       </div>
     </div>
 
-    <CreateFolder
-      v-if="isShowNewFolder"
-      :validate="validateNewFolderName"
-      @close="isShowNewFolder = false"
-      @submit="onSubmitNewFolder"
-    />
-    <RenameFolder
-      v-if="isShowRenameFolder"
-      :oldName="popupItem.name"
-      :validate="validateRenameFolderName"
-      @close="isShowRenameFolder = false"
-      @submit="onSubmitRenameFolder"
-    />
-    <MoveFolder
-      v-if="isShowMoveFolder"
-      :folderTree="folderTree"
-      :selectedList="selectedList"
-      @close="isShowMoveFolder = false"
-      @submit="onSubmitMoveFolder"
-    />
-    <rename
-      v-if="showRename"
-      :item="popupItem"
-      @rename="handleRename"
-      @close="showRename = false"
-    />
-    <preview
-      ref="image-previewer"
-      :sceneCodeList="list.map((item) => item.sceneCode)"
-      :imageTitleList="list.map((item) => item.name)"
-      @click-delete="onClickDeleteInPreview"
-    />
-    <cover
-      @panocover="handlePanoCover"
-      :item="popupItem"
-      v-if="showCover"
-      @close="showCover = false"
-    />
+    <CreateFolder v-if="isShowNewFolder" :validate="validateNewFolderName" @close="isShowNewFolder = false" @submit="onSubmitNewFolder" />
+    <RenameFolder v-if="isShowRenameFolder" :oldName="popupItem.name" :validate="validateRenameFolderName" @close="isShowRenameFolder = false" @submit="onSubmitRenameFolder" />
+    <MoveFolder v-if="isShowMoveFolder" :folderTree="folderTree" :selectedList="selectedList" @close="isShowMoveFolder = false" @submit="onSubmitMoveFolder" />
+    <rename v-if="showRename" :item="popupItem" @rename="handleRename" @close="showRename = false" />
+    <preview ref="image-previewer" :sceneCodeList="list.map((item) => item.sceneCode)" :imageTitleList="list.map((item) => item.name)" @click-delete="onClickDeleteInPreview" />
+    <cover @panocover="handlePanoCover" :item="popupItem" v-if="showCover" @close="showCover = false" />
   </div>
 </template>
 
@@ -302,15 +180,7 @@ import { mapState } from "vuex";
 import { i18n } from "@/lang";
 import folderMixinFactory from "../folderMixinFactory.js";
 
-import {
-  getMaterialList,
-  uploadMaterial,
-  editMaterial,
-  delMaterial,
-  uploadCover,
-  checkMStatus,
-  checkUserSize,
-} from "@/api";
+import { getMaterialList, uploadMaterial, editMaterial, delMaterial, uploadCover, checkMStatus, checkUserSize } from "@/api";
 
 const TYPE = "pano";
 const LONG_POLLING_INTERVAL = 5;
@@ -429,9 +299,7 @@ export default {
           // eslint-disable-next-line no-unreachable
         });
         const res = new Map();
-        const allList = this.uploadListForUI
-          .concat(uploadMark)
-          .filter((a) => !res.has(a.backendId) && res.set(a.backendId, 1));
+        const allList = this.uploadListForUI.concat(uploadMark).filter((a) => !res.has(a.backendId) && res.set(a.backendId, 1));
         // console.log("allList", uploadMark);
         if (allList.length > 0) {
           this.uploadListForUI = allList;
@@ -549,9 +417,7 @@ export default {
       });
     },
     _checkMStatus() {
-      let needPollingTaskList = this.uploadListForUI.filter(
-        (item) => item.status === "LOADING" && item.ifKnowProgress === false
-      );
+      let needPollingTaskList = this.uploadListForUI.filter((item) => item.status === "LOADING" && item.ifKnowProgress === false);
       if (needPollingTaskList.length > 0) {
         checkMStatus(
           {
@@ -562,9 +428,7 @@ export default {
             // 1切图中，2失败，3成功
             res.data.forEach((eachRes) => {
               if (eachRes.status === 2) {
-                const index = this.uploadListForUI.findIndex(
-                  (eachTask) => eachTask.backendId === eachRes.id
-                );
+                const index = this.uploadListForUI.findIndex((eachTask) => eachTask.backendId === eachRes.id);
                 if (index >= 0) {
                   this.uploadListForUI[index].status = "FAIL";
                   const text = i18n.t("gather.material_cutting_fail");
@@ -577,9 +441,7 @@ export default {
                 //     i18n.t("gather.material_cutting_fail")
                 //   ));
               } else if (eachRes.status === 3) {
-                const index = this.uploadListForUI.findIndex(
-                  (eachTask) => eachTask.backendId === eachRes.id
-                );
+                const index = this.uploadListForUI.findIndex((eachTask) => eachTask.backendId === eachRes.id);
                 index >= 0 && this.uploadListForUI.splice(index, 1);
                 index >= 0 && this.refreshListDebounced();
               }
@@ -614,9 +476,7 @@ export default {
                   return eachItem.id === item.id;
                 });
                 //去掉已存在移动的id
-                const alreadySelectIndex = this.selectedList.findIndex(
-                  (i) => i.id === item.id
-                );
+                const alreadySelectIndex = this.selectedList.findIndex((i) => i.id === item.id);
                 if (alreadySelectIndex > -1) {
                   this.selectedList.splice(alreadySelectIndex, 1);
                 }
@@ -673,9 +533,7 @@ export default {
                     return eachItem.id === item.id;
                   });
                   //去掉已存在移动的id
-                  const alreadySelectIndex = this.selectedList.findIndex(
-                    (i) => i.id === item.id
-                  );
+                  const alreadySelectIndex = this.selectedList.findIndex((i) => i.id === item.id);
                   if (alreadySelectIndex > -1) {
                     this.selectedList.splice(alreadySelectIndex, 1);
                   }
@@ -727,16 +585,10 @@ export default {
           return;
         }
 
-        if (
-          eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50
-        ) {
+        if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
           setTimeout(() => {
             this.$msg({
-              message: `“${
-                eachFile.name.substring(0, 50) +
-                "..." +
-                eachFile.name.split(".")[1]
-              }”${i18n.t("gather.too_long_word")}`,
+              message: `“${eachFile.name.substring(0, 50) + "..." + eachFile.name.split(".")[1]}”${i18n.t("gather.too_long_word")}`,
               type: "warning",
             });
           }, i * 100);
@@ -750,6 +602,13 @@ export default {
           WHRate = width / height;
         } catch (e) {
           console.error("获取图像宽高失败：", e);
+          if (e.message === "loadFile Error") {
+            this.$msg({
+              message:`“${eachFile.name}”${i18n.t("tips_code.loading_fail")}`,
+              type: "warning",
+            });
+            return;
+          }
           setTimeout(() => {
             this.$msg({
               message: `“${eachFile.name}”${i18n.t("gather.pano_fail")}`,
@@ -767,7 +626,6 @@ export default {
           }, i * 100);
           return;
         }
-
         let itemInUploadList = {
           title: eachFile.name,
           ifKnowProgress: true,
@@ -802,9 +660,7 @@ export default {
               this.uploadListForUI.splice(index, 1);
             } else {
               itemInUploadList.status = "FAIL";
-              itemInUploadList.statusText = i18n.t(
-                "gather.material_upload_fail"
-              );
+              itemInUploadList.statusText = i18n.t("gather.material_upload_fail");
             }
           },
           (progress) => {