gitee
/
django-vue-admin
mirror of https://gitee.com/liqianglog/django-vue-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

pull/52/MERGE
李强 2022-04-25 15:55:23 +08:00
parent 614adf6d74
commit add1f3a47b
6 changed files with 130 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
backend/dvadmin/system/views/file_list.py
View File

@ -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

118
web/src/config/d2p-extends/types.js Normal file
View File

@ -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(',')
}
}
}
}

13
web/src/install.js
View File

@ -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: {
Authorization: 'JWT ' + util.cookies.get('token')
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' // 修改官方的字段类型，设置为支持自动染色

40
web/src/views/demo/page1/crud.js
View File

@ -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
}
}
}
},
{

19
web/src/views/system/fileList/crud.js
View File

@ -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,
valueBuilder (row, key) {
console.log(row, key)
row.url = `${util.baseURL()}media/${row.url}`
}
width: 220
},
{
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: '备注',

25
web/src/views/system/user/crud.js
View File

@ -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'
},
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
}
}
helper: '限制文件大小不能超过500k'
}
},
{