优化: 文件及图片上传全局配置优化

backend/dvadmin/system/views/file_list.py

@@ -1,11 +1,3 @@
-# -*- coding: utf-8 -*-
-
-"""
-@author: 猿小天
-@contact: QQ:1638245306
-@Created on: 2021/8/9 009 20:48
-@Remark:
-"""
 from rest_framework import serializers
 
 from dvadmin.system.models import FileList
@@ -17,7 +9,7 @@ class FileSerializer(CustomModelSerializer):
     url = serializers.SerializerMethodField(read_only=True)
 
     def get_url(self, instance):
-        return  'media/'+str(instance.url)
+        return 'media/' + str(instance.url)
 
     class Meta:
         model = FileList

web/src/config/d2p-extends/types.js

@@ -0,0 +1,118 @@
+export default {
+  'image-uploader': {
+    form: { component: { name: 'd2p-file-uploader', props: { elProps: { listType: 'picture-card', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif' } } } },
+    component: { name: 'd2p-images-format' },
+    view: {
+      component: { props: { height: 100, width: 100 } }
+    },
+    align: 'center',
+    // 提交时,处理数据
+    valueResolve (row, col) {
+      const value = row[col.key]
+      if (value != null) {
+        if (value.length >= 0) {
+          if (value instanceof Array) {
+            row[col.key] = value.toString()
+          } else {
+            row[col.key] = value[0]
+          }
+        } else {
+          row[col.key] = null
+        }
+      }
+    },
+    // 接收时,处理数据
+    valueBuilder (row, col) {
+      const value = row[col.key]
+      if (value != null) {
+        row[col.key] = value.split(',')
+      }
+    }
+  },
+  'avatar-uploader': {
+    form: { component: { name: 'd2p-file-uploader', props: { elProps: { limit: 1, listType: 'avatar', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', showFileList: false } } } },
+    component: { name: 'd2p-images-format' },
+    view: {
+      component: { props: { height: 100, width: 100 } }
+    },
+    align: 'center',
+    // 提交时,处理数据
+    valueResolve (row, col) {
+      const value = row[col.key]
+      if (value != null) {
+        if (value.length >= 0) {
+          if (value instanceof Array) {
+            row[col.key] = value.toString()
+          } else {
+            row[col.key] = value[0]
+          }
+        } else {
+          row[col.key] = null
+        }
+      }
+    },
+    // 接收时,处理数据
+    valueBuilder (row, col) {
+      const value = row[col.key]
+      if (value != null) {
+        row[col.key] = value.split(',')
+      }
+    }
+  },
+  'file-uploader': {
+    form: { component: { name: 'd2p-file-uploader', props: { elProps: { listType: 'text' } } } },
+    component: { name: 'd2p-files-format' },
+    // 提交时,处理数据
+    valueResolve (row, col) {
+      const value = row[col.key]
+      if (value != null) {
+        if (value.length >= 0) {
+          if (value instanceof Array) {
+            row[col.key] = value.toString()
+          } else {
+            row[col.key] = value[0]
+          }
+        } else {
+          row[col.key] = null
+        }
+      }
+    },
+    // 接收时,处理数据
+    valueBuilder (row, col) {
+      const value = row[col.key]
+      if (value != null) {
+        row[col.key] = value.split(',')
+      }
+    }
+  },
+  'avatar-cropper': {
+    form: { component: { name: 'd2p-cropper-uploader', props: { accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', cropper: { viewMode: 1 } } } },
+    component: { name: 'd2p-images-format' },
+    align: 'center',
+    view: {
+      component: { props: { height: 100, width: 100 } }
+    },
+    // 提交时,处理数据
+    valueResolve (row, col) {
+      const value = row[col.key]
+      if (value != null) {
+        if (value.length >= 0) {
+          if (value instanceof Array) {
+            row[col.key] = value.toString()
+          } else {
+            row[col.key] = value[0]
+          }
+        } else {
+          row[col.key] = null
+        }
+      }
+    },
+    // 接收时,处理数据
+    valueBuilder (row, col) {
+      const value = row[col.key]
+      if (value != null) {
+        row[col.key] = value.split(',')
+      }
+    }
+  }
+}

web/src/install.js

@@ -15,7 +15,8 @@ import {
 import { request } from '@/api/service'
 import util from '@/libs/util'
 import XEUtils from 'xe-utils'
-import { urlPrefix as deptPrefix } from '@/views/system/dept/'
+import { urlPrefix as deptPrefix } from '@/views/system/dept/api'
+import types from '@/config/d2p-extends/types'
 const uploadUrl = util.baseURL() + 'api/system/file/'
 
 /**
@@ -163,20 +164,22 @@ Vue.use(D2pUploader, {
     action: uploadUrl,
     name: 'file',
     data: {}, // 上传附加参数
-    headers: {
+    headers () {
+      return {
         Authorization: 'JWT ' + util.cookies.get('token')
+      }
     },
     type: 'form',
     successHandle (ret, option) {
       if (ret.data === null || ret.data === '') {
         throw new Error('上传失败')
       }
-      return { url: util.baseURL() + 'media/' + ret.data.data.url, key: option.data.key }
+      return { url: util.baseURL() + ret.data.url, key: option.data.key }
     },
     withCredentials: false // 是否带cookie
   }
 })
-
+d2CrudPlus.util.columnResolve.addTypes(types)
 // 修改官方字段类型
 const selectType = d2CrudPlus.util.columnResolve.getType('select')
 selectType.component.props.color = 'auto' // 修改官方的字段类型，设置为支持自动染色

web/src/views/demo/page1/crud.js

@@ -92,26 +92,6 @@ export const crudOptions = (vm) => {
             span: 24
           },
           helper: '限制文件大小不能超过50k'
-        },
-        valueResolve (row, col) {
-          const value = row[col.key]
-          if (value != null && value instanceof Array) {
-            if (value.length >= 0) {
-              row[col.key] = value[0]
-            } else {
-              row[col.key] = null
-            }
-          }
-        },
-        component: {
-          props: {
-            buildUrl (value, item) {
-              if (value && value.indexOf('http') !== 0) {
-                return '/api/upload/form/download?key=' + value
-              }
-              return value
-            }
-          }
         }
       },
       {
@@ -132,26 +112,6 @@ export const crudOptions = (vm) => {
             span: 24
           },
           helper: '限制文件大小不能超过50k'
-        },
-        valueResolve (row, col) {
-          const value = row[col.key]
-          if (value != null && value instanceof Array) {
-            if (value.length >= 0) {
-              row[col.key] = value[0]
-            } else {
-              row[col.key] = null
-            }
-          }
-        },
-        component: {
-          props: {
-            buildUrl (value, item) {
-              if (value && value.indexOf('http') !== 0) {
-                return '/api/upload/form/download?key=' + value
-              }
-              return value
-            }
-          }
         }
       },
       {

web/src/views/system/fileList/crud.js

@@ -1,5 +1,3 @@
-import util from '@/libs/util'
-
 export const crudOptions = (vm) => {
   return {
     pageOptions: {
@@ -92,11 +90,7 @@ export const crudOptions = (vm) => {
         search: {
           disabled: true
         },
-        width: 220,
+        width: 220
-        valueBuilder (row, key) {
-          console.log(row, key)
-          row.url = `${util.baseURL()}media/${row.url}`
-        }
       },
       {
         title: '文件MD5',
@@ -107,18 +101,7 @@ export const crudOptions = (vm) => {
         },
         form: {
           disabled: false
-        },
-        valueResolve (row, col) {
-          const value = row[col.key]
-          if (value != null && value instanceof Array) {
-            if (value.length >= 0) {
-              row[col.key] = value[0]
-            } else {
-              row[col.key] = null
         }
-          }
-        }
-
       },
       {
         title: '备注',

web/src/views/system/user/crud.js

@@ -1,7 +1,6 @@
 import { request } from '@/api/service'
 import { BUTTON_STATUS_BOOL } from '@/config/button'
 import { urlPrefix as deptPrefix } from '../dept/api'
-import util from '@/libs/util'
 
 export const crudOptions = (vm) => {
   return {
@@ -267,31 +266,11 @@ export const crudOptions = (vm) => {
                 multiple: true,
                 limit: 5 // 限制5个文件
               },
-              sizeLimit: 100 * 1024 // 不能超过限制
+              sizeLimit: 500 * 1024 // 不能超过限制
             },
             span: 24
           },
-          helper: '限制文件大小不能超过50k'
+          helper: '限制文件大小不能超过500k'
-        },
-        valueResolve (row, col) {
-          const value = row[col.key]
-          if (value != null && value instanceof Array) {
-            if (value.length >= 0) {
-              row[col.key] = value[0]
-            } else {
-              row[col.key] = null
-            }
-          }
-        },
-        component: {
-          props: {
-            buildUrl (value, item) {
-              if (value && value.indexOf('http') !== 0) {
-                return util.baseURL() + value
-              }
-              return value
-            }
-          }
         }
       },
       {