fix(custom): 修复上传组件上传失败以及补全商户分类icon

package.json

@@ -32,8 +32,8 @@
     ]
   },
   "dependencies": {
-    "@sentry/vite-plugin": "^2.10.1",
+    "@sentry/vite-plugin": "^2.10.2",
-    "@sentry/vue": "^7.81.0",
+    "@sentry/vue": "^7.83.0",
     "@unocss/eslint-config": "^0.55.7",
     "@vueuse/core": "^10.6.1",
     "@wangeditor/editor": "^5.1.23",
@@ -54,11 +54,11 @@
   "devDependencies": {
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
-    "@iconify/json": "^2.2.144",
+    "@iconify/json": "^2.2.149",
     "@iconify/vue": "^4.1.1",
     "@unocss/preset-rem-to-px": "^0.55.7",
     "@vitejs/plugin-vue": "^4.5.0",
-    "@vue/compiler-sfc": "^3.3.8",
+    "@vue/compiler-sfc": "^3.3.9",
     "@zclzone/eslint-config": "^0.0.4",
     "chalk": "^5.3.0",
     "commitizen": "^4.3.0",
@@ -66,11 +66,11 @@
     "cz-customizable": "^7.0.0",
     "dotenv": "^16.3.1",
     "esno": "^0.17.0",
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^11.2.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
     "naive-ui": "^2.35.0",
-    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup-plugin-visualizer": "^5.9.3",
     "sass": "^1.69.5",
     "unocss": "0.55.0",
     "unplugin-auto-import": "^0.16.7",

src/components/Upload.vue

@@ -1,22 +1,17 @@
 <template>
   <n-upload
     v-model:file-list="List"
-    action="/admin/upload"
-    :headers="headers"
     :max="max"
     list-type="image-card"
+    :custom-request="customRequest"
     @before-upload="beforeUpload"
-    @finish="handleFinish"
-    @error="handleError"
   >
     点击上传
   </n-upload>
 </template>
 
 <script setup>
-import { getToken } from '@/utils'
+import api from '@/api'
-
-const token = getToken()
 
 const prop = defineProps({
   list: {
@@ -31,10 +26,6 @@ const prop = defineProps({
 
 const emit = defineEmits(['update:list'])
 
-const headers = ref({
-  Authorization: `Bearer ${token}`,
-})
-
 const List = computed({
   get() {
     return prop.list
@@ -44,24 +35,28 @@ const List = computed({
   },
 })
 
-const handleFinish = ({ file, event }) => {
-  const res = JSON.parse(event.target.response)
-  file.url = res.data.data
-  return file
-}
-
-const handleError = () => {
-  $message.error('上传失败')
-}
-
 // 图片上传限制
-const beforeUpload = (data) => {
+const beforeUpload = ({ file }) => {
-  if (!(data.file.file?.type === 'image/png' || data.file.file?.type === 'image/jpeg')) {
+  if (!(file.file?.type === 'image/png' || file.file?.type === 'image/jpeg')) {
     $message.error('只能上传png或jpg格式的图片文件,请重新上传')
     return false
   }
   return true
 }
+
+const customRequest = async ({ file, onFinish, onError }) => {
+  try {
+    const formData = new FormData()
+    formData.append('file', file.file)
+    const res = await api.uploadImg(formData)
+    $message.success(res.msg)
+    file.url = res.data.data
+    onFinish()
+  } catch (error) {
+    onError()
+    throw error
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/business/mer_class/index.vue

@@ -24,6 +24,9 @@
         aria-modal="true"
       >
         <n-form ref="formRef" label-placement="left" :model="formValue" :rules="rules">
+          <n-form-item label="分类图标：" path="icon">
+            <Upload v-model:list="formValue.icon" />
+          </n-form-item>
           <n-form-item label="分类名称：" path="name">
             <n-input v-model:value="formValue.name" placeholder="请输入商户分类名称" />
           </n-form-item>
@@ -53,6 +56,8 @@
 import { onMounted, h, withDirectives, resolveDirective } from 'vue'
 import api from './api'
 import { NButton } from 'naive-ui'
+import Upload from '@/components/Upload.vue'
+
 const vPerms = resolveDirective('perms')
 
 const loading = ref(false)
@@ -93,7 +98,19 @@ const columns = ref([
               type: 'primary',
               size: 'small',
               onClick: () => {
-                formValue.value = row
+                formValue.value = {
+                  ...row,
+                  icon:
+                    row.icon.length > 0
+                      ? [
+                          {
+                            url: row.icon,
+                            name: '图片',
+                            status: 'finished',
+                          },
+                        ]
+                      : [],
+                }
                 handleAdd(2)
               },
             },
@@ -115,12 +132,18 @@ const rules = {
     required: true,
     message: '请输入商户分类名称',
   },
+  icon: {
+    required: true,
+    type: 'array',
+    message: '请上传分类图标',
+  },
 }
 
 const formValue = ref({
   ID: 0,
   name: '',
   status: 1,
+  icon: [],
 })
 
 const showModal = ref(false)
@@ -171,6 +194,7 @@ const clear = () => {
     ID: 0,
     name: '',
     status: 1,
+    icon: [],
   }
   showModal.value = false
 }
@@ -180,7 +204,10 @@ const handleValidateClick = async (e) => {
   formRef.value?.validate(async (errors) => {
     if (!errors) {
       try {
-        await api.addClass(formValue.value)
+        await api.addClass({
+          ...formValue.value,
+          icon: formValue.value.icon[0].url,
+        })
         $message.success('成功')
         clear()
         getList()