提交 041b612d 编写于 作者: Shine-zwj's avatar Shine-zwj

add:增加文件上传组件上传个数与类型白名单的相关参数

上级 e6913fd1
......@@ -9,6 +9,7 @@
:disabled="disabled"
:file-list="files"
:action="uploadUrl"
:limit="multiple ? limit: 1"
:multiple="multiple"
:headers="{}"
:before-upload="beforeUpload"
......@@ -18,8 +19,9 @@
:on-preview="onDownload"
:drag="isdrag"
:show-file-list="!rowPreview"
:on-exceed = "handleExceed"
>
<el-button v-if="!isdrag" size='small' icon='el-icon-upload' :disabled="disabled || !(multiple || files.length === 0)">{{this.$t('app.fileUpload.caption')}}</el-button>
<el-button v-if="!isdrag" size='small' icon='el-icon-upload' :disabled="disabled">{{this.$t('app.fileUpload.caption')}}</el-button>
<i v-if="isdrag" class="el-icon-upload"></i>
<div v-if="isdrag" class="el-upload__text" v-html="$t('components.appFileUpload.uploadText')"></div>
</el-upload>
......@@ -84,14 +86,6 @@ export default class AppFileUpload extends Vue {
*/
@Prop() public isdrag?: boolean;
/**
* 是否多选
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop({default: true}) public multiple?: boolean;
/**
* 表单状态事件
*
......@@ -182,6 +176,30 @@ export default class AppFileUpload extends Vue {
*/
@Prop() public exportparams?: any;
/**
* 是否支持多个文件上传
*
* @type {string}
* @memberof AppFileUpload
*/
@Prop({default: true}) public multiple!: boolean;
/**
* 最大允许上传个数
*
* @type {*}
* @memberof AppImageUpload
*/
@Prop({default: 9999}) public limit!: number;
/**
* 接受上传的文件类型
*
* @type {*}
* @memberof AppImageUpload
*/
@Prop({default: '*'}) public accept!: string;
/**
* 上传文件路径
*
......@@ -482,6 +500,14 @@ export default class AppFileUpload extends Vue {
*/
public showActions: boolean = false;
/**
* 处理多选超出
*
* @memberof AppFileUpload
*/
public handleExceed(files: any, fileList: any) {
this.$message.warning(`${this.$t('components.appFileUpload.limitselect')} ${this.limit}`);
}
}
</script>
......
......@@ -32,11 +32,14 @@
<!-- 文件上传 -->
<el-upload
v-if = "multiple || files.length === 0"
:limit="multiple ? limit: 1"
:class = "{'el-upload-disabled':disabled}"
:disabled = "disabled"
:action = "uploadUrl"
:headers = "{ 'srfappdata': appData }"
:show-file-list = "false"
:multiple="multiple"
:accept="accept"
list-type = "picture-card"
:file-list = "files"
:before-upload = "beforeUpload"
......@@ -44,6 +47,7 @@
:before-remove = "onRemove"
:on-error = "onError"
:on-preview = "onDownload"
:on-exceed = "handleExceed"
>
<i class="el-icon-plus"></i>
</el-upload>
......@@ -180,6 +184,22 @@ export default class AppImageUpload extends Vue {
*/
@Prop() public customparams?: any;
/**
* 最大允许上传个数
*
* @type {*}
* @memberof AppImageUpload
*/
@Prop({default: 9999}) public limit!: number;
/**
* 接受上传的文件类型
*
* @type {*}
* @memberof AppImageUpload
*/
@Prop({default: 'image/*'}) public accept!: string;
/**
* 上传文件路径
*
......@@ -472,6 +492,15 @@ export default class AppImageUpload extends Vue {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
/**
* 处理多选超出
*
* @memberof AppImageUpload
*/
public handleExceed(files: any, fileList: any) {
this.$message.warning(`${this.$t('components.appImageUpload.limitselect')} ${this.limit}`);
}
}
</script>
<style lang = "less">
......
......@@ -68,6 +68,7 @@ function getLocaleResourceBase(){
uploadText: 'Drag files here,or <em>Click</em> to upload',
fileTypeErrorTitle: 'File type incorrect',
fileTypeErrorInfo: 'Please select files with picture types,such as JPEG,GIF,PNG,BMP',
limitselect: 'The current number of restricted choices is ',
},
appFormDRUIPart: {
blockUITipInfo: 'Please save the major data first',
......@@ -208,7 +209,8 @@ function getLocaleResourceBase(){
groupSelect:'Group selection',
},
appImageUpload:{
uploadFail:'Upload failed'
uploadFail:'Upload failed',
limitselect: 'The current number of restricted choices is ',
},
appOrgSelect:{
loadFail:'Failed to load data'
......
......@@ -69,6 +69,7 @@ function getLocaleResourceBase(){
uploadError: '上传失败',
fileTypeErrorTitle: '文件类型错误',
fileTypeErrorInfo: '请选择图片类型的文件,如JPEG,GIF,PNG,BMP',
limitselect: '当前限制选择数量为 ',
},
appFormDRUIPart: {
blockUITipInfo: '请先保存主数据',
......@@ -209,7 +210,8 @@ function getLocaleResourceBase(){
groupSelect:'分组选择',
},
appImageUpload:{
uploadFail:'上传失败'
uploadFail:'上传失败',
limitselect: '当前限制选择数量为 ',
},
appOrgSelect:{
loadFail:'加载数据失败'
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册