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

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

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