Navigation Menu

Skip to content

Commit

Permalink
fix: 文件上传支持文件大小限制配置
Browse files Browse the repository at this point in the history
  • Loading branch information
@greper
greper committed Jun 4, 2020
1 parent 53d54ba commit af22fe1
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 138 deletions.
271 changes: 137 additions & 134 deletions packages/d2-crud-plus-example/src/business/modules/example/views/form/uploader/crud.js
View file
@@ -1,147 +1,150 @@
export const crudOptions = {
columns: [
{
title: '头像',
key: 'avatar',
type: 'avatar-uploader',
width: 120,
form: {
component: {
props: {
returnType: 'object' // 返回值类型，object则返回{url:xx,md5:xx,size:xx} , url则仅返回字符串
}
},
valueChange (key, value, form) { // 当返回值有变化时触发
if (value != null) {
form.avatarSize = value.size
form.avatarMd5 = value.md5
}
console.log('avatar value Changed:', key, value, form)
},
helper: '上传后，右边将获取到头像大小和md5值，文件上传组件不支持裁剪，如需裁剪，请参考头像裁剪上传组件'
}
},
{
title: '头像文件大小',
key: 'avatarSize',
width: 120
},
{
title: '头像文件md5',
key: 'avatarMd5',
width: 200
},
{
title: '照片墙',
key: 'image',
type: 'image-uploader',
width: 150,
form: {
component: {
props: {
elProps: { // 与el-uploader 配置一致
multiple: true,
limit: 5 // 限制5个文件
export const crudOptions = (vm) => {
return {
columns: [
{
title: '头像',
key: 'avatar',
type: 'avatar-uploader',
width: 120,
form: {
component: {
props: {
returnType: 'object' // 返回值类型，object则返回{url:xx,md5:xx,size:xx} , url则仅返回字符串
}
}
},
helper: '默认腾讯云cos上传'
}
},
{
title: '图片列表',
key: 'image2',
type: 'image-uploader',
width: 150,
form: {
component: {
props: {
elProps: { // 与el-uploader 配置一致
multiple: true,
listType: 'picture',
limit: 5 // 限制5个文件
},
valueChange (key, value, form) { // 当返回值有变化时触发
if (value != null) {
form.avatarSize = value.size
form.avatarMd5 = value.md5
}
console.log('avatar value Changed:', key, value, form)
},
helper: '上传后，右边将获取到头像大小和md5值，文件上传组件不支持裁剪，如需裁剪，请参考头像裁剪上传组件'
}
},
{
title: '头像文件大小',
key: 'avatarSize',
width: 120
},
{
title: '头像文件md5',
key: 'avatarMd5',
width: 200
},
{
title: '照片墙',
key: 'image',
type: 'image-uploader',
width: 150,
form: {
component: {
props: {
elProps: { // 与el-uploader 配置一致
multiple: true,
limit: 5 // 限制5个文件
},
sizeLimit: 50 * 1024 // 不能超过20k
}
},
helper: '默认腾讯云cos上传,限制文件大小不能超过50k'
}
},
{
title: '图片列表',
key: 'image2',
type: 'image-uploader',
width: 150,
form: {
component: {
props: {
elProps: { // 与el-uploader 配置一致
multiple: true,
listType: 'picture',
limit: 5 // 限制5个文件
}
}
}
}
}
},
{
title: '文件',
key: 'file',
sortable: true,
type: 'file-uploader',
form: {
component: {
props: {
elProps: {// element upload组件的props
limit: 0 // 不限制数量
},
uploader: {
// action: 'http://d2p.veryreader.com:7070/api/upload/form/upload',
custom: {
keepName: true // 保持文件名，注意：中文及特殊符号文件名在ios上支持不是很好
},
{
title: '文件',
key: 'file',
sortable: true,
type: 'file-uploader',
form: {
component: {
props: {
elProps: {// element upload组件的props
limit: 0 // 不限制数量
},
uploader: {
// action: 'http://d2p.veryreader.com:7070/api/upload/form/upload',
custom: {
keepName: true // 保持文件名，注意：中文及特殊符号文件名在ios上支持不是很好
}
}
},
span: 20
},
helper: {
slot: true
}
}
},
{
title: '七牛',
key: 'qiniuAvatar',
sortable: true,
type: 'avatar-uploader',
width: 100,
form: {
component: {
props: {
type: 'qiniu'
}
},
span: 24
},
helper: {
slot: true
helper: '这里演示的是七牛文件上传'
}
}
},
{
title: '七牛',
key: 'qiniuAvatar',
sortable: true,
type: 'avatar-uploader',
width: 100,
form: {
component: {
props: {
type: 'qiniu'
}
},
helper: '这里演示的是七牛文件上传'
}
},
{
title: '阿里云',
key: 'aliossAvatar',
sortable: true,
type: 'avatar-uploader',
width: 100,
form: {
component: {
props: {
type: 'alioss',
suffix: '!200_200'
},
{
title: '阿里云',
key: 'aliossAvatar',
sortable: true,
type: 'avatar-uploader',
width: 100,
form: {
component: {
props: {
type: 'alioss',
suffix: '!200_200'
},
span: 24
},
span: 24
},
helper: '这里演示的是阿里云文件上传,配置样式，居中裁剪成200x200方形图片'
}
},
{
title: '本地服务器',
key: 'formAvatar',
sortable: true,
type: 'avatar-uploader',
width: 130,
form: {
component: {
props: {
uploader: {
type: 'form',
custom: {
keepName: false
helper: '这里演示的是阿里云文件上传,配置样式，居中裁剪成200x200方形图片'
}
},
{
title: '本地服务器',
key: 'formAvatar',
sortable: true,
type: 'avatar-uploader',
width: 130,
form: {
component: {
props: {
uploader: {
type: 'form',
custom: {
keepName: false
}
}
}
},
span: 24
},
span: 24
},
helper: 'form表单上传'
helper: 'form表单上传'
}
}
}
]
]
}
}
2 changes: 1 addition & 1 deletion packages/d2-crud-plus-example/src/business/modules/example/views/form/uploader/index.vue
View file
Expand Up @@ -87,7 +87,7 @@ export default {
},
methods: {
getCrudOptions () {
return crudOptions
return crudOptions(this)
},
pageRequest (query) {
return GetList(query)
Expand Down
48 changes: 45 additions & 3 deletions packages/d2-crud-plus-extends/src/file-uploader/lib/file-uploader.vue
View file
Expand Up @@ -75,6 +75,10 @@ export default {
elProps: {
type: Object
},
// 文件大小限制
sizeLimit: {
type: Number, Object
},
// 上传组件参数，会临时覆盖全局上传配置参数[d2p-uploader](/guide/extends/uploader.html)
uploader: {
type: Object,
Expand Down Expand Up @@ -127,10 +131,37 @@ export default {
limit: 0,
listType: 'text',
showFileList: true,
action: ''
action: '',
beforeUpload: (file) => {
if (this.sizeLimit == null) {
return true
}
let limit = this.sizeLimit
let showMessage = null
if (typeof limit === 'number') {
console.log('1111：', file.size)
limit = this.sizeLimit
showMessage = (fileSize, limit) => {
if (this.$message) {
let limitTip = this.computeFileSize(limit)
let fileSizeTip = this.computeFileSize(file.size)
this.$message({ message: '文件大小不能超过' + limitTip + '，当前文件大小:' + fileSizeTip, type: 'warning' })
}
}
} else {
console.log('2222：', typeof limit)
limit = this.sizeLimit.limit
showMessage = this.sizeLimit.tip
}
if (file.size > limit) {
console.log('文件大小超过限制：', file.size)
showMessage(file.size, limit)
return false
}
}
}
let props = Object.assign(defaultElProps, this.elProps)
return props
Object.assign(defaultElProps, this.elProps)
return defaultElProps
},
avatarUrl () {
if (this.fileList.length > 0) {
Expand Down Expand Up @@ -191,6 +222,17 @@ export default {
}
this.resetFileList(fileList)
},
computeFileSize (fileSize) {
let sizeTip = fileSize
if (fileSize > (1024 * 1024 * 1024)) {
sizeTip = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'G'
} else if (fileSize > (1024 * 1024)) {
sizeTip = (fileSize / (1024 * 1024)).toFixed(2) + 'M'
} else {
sizeTip = Math.round(fileSize / (1024)) + 'K'
}
return sizeTip
},
resetFileList (fileList) {
this.$set(this, 'fileList', fileList)
},
Expand Down

0 comments on commit af22fe1

Please sign in to comment.