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

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'
-
-const token = getToken()
+import api from '@/api'
 
 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) => {
-  if (!(data.file.file?.type === 'image/png' || data.file.file?.type === 'image/jpeg')) {
+const beforeUpload = ({ file }) => {
+  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>