【分类】图片回显增加地址校验

gz-yami · Apr 15, 2024 · 37bffbd · 37bffbd
1 parent 34633fd
commit 37bffbd
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/front-end/mall4uni/src/pages/category/category.vue b/front-end/mall4uni/src/pages/category/category.vue
@@ -52,7 +52,7 @@
         <view class="adver-map">
           <view class="item-a">
             <image
-              :src="categoryImg"
+              :src="util.checkFileUrl(categoryImg)"
               mode="widthFix"
             />
           </view>
@@ -74,7 +74,7 @@
                 @tap="toCatePage"
               >
                 <image
-                  :src="thCateItem.pic"
+                  :src="util.checkFileUrl(thCateItem.pic)"
                   class="more-pic"
                   mode="widthFix"
                 />
@@ -96,6 +96,7 @@
 </template>
 
 <script setup>
+import util from '@/utils/util.js'
 const categoryList = ref([])
 const subCategoryList = ref([])
 const categoryImg = ref('')

diff --git a/front-end/mall4v/src/components/pic-upload/index.vue b/front-end/mall4v/src/components/pic-upload/index.vue
@@ -12,7 +12,7 @@
       <img
         v-if="modelValue"
         alt=""
-        :src="resourcesUrl + modelValue"
+        :src="checkFileUrl(modelValue)"
         class="pic"
       >
       <el-icon
@@ -27,6 +27,7 @@
 </template>
 
 <script setup>
+import { checkFileUrl } from '@/utils'
 import $cookie from 'vue-cookies'
 import { ElMessage } from 'element-plus'
 const uploadHeaders = { Authorization: $cookie.get('Authorization') }
@@ -39,7 +40,6 @@ const props = defineProps({
     type: String
   }
 })
-const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
 /**
  * 图片上传
  */

diff --git a/front-end/mall4v/src/utils/index.js b/front-end/mall4v/src/utils/index.js
@@ -87,3 +87,23 @@ export function idList (data, val, id = 'id', children = 'children') {
   idListFromTree(data, val, res, id)
   return res
 }
+
+/**
+ * 文件地址校验
+ * @param fileUrl 获取到的文件路径
+ */
+export function checkFileUrl (fileUrl) {
+  if (fileUrl === '') return ''
+  const baseUrl = import.meta.env.VITE_APP_RESOURCES_URL
+  // 适配el-image 图片组件预览功能
+  if (fileUrl && typeof fileUrl === 'object') {
+    // eslint-disable-next-line no-return-assign
+    return fileUrl.map(el => el = checkFileUrl(el))
+  } else {
+    if (fileUrl && fileUrl.indexOf('http') === -1) {
+      return baseUrl + fileUrl
+    } else {
+      return fileUrl
+    }
+  }
+}
diff --git a/front-end/mall4v/src/views/modules/prod/category/index.vue b/front-end/mall4v/src/views/modules/prod/category/index.vue
@@ -37,7 +37,7 @@
         <template #default="scope">
           <img
             alt=""
-            :src="resourcesUrl + scope.row.pic "
+            :src="checkFileUrl(scope.row.pic)"
           >
         </template>
       </el-table-column>
@@ -99,10 +99,9 @@
 </template>
 
 <script setup>
-import { isAuth, treeDataTranslate } from '@/utils'
+import { checkFileUrl, isAuth, treeDataTranslate } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AddOrUpdate from './add-or-update.vue'
-const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
 const dataForm = ref({})
 
 onMounted(() => {