提交 6e8cea05 编写于 作者: jlj05024111@163.com's avatar jlj05024111@163.com

feat: 更新文件上传支持白名单,支持自定义上传文件大小限制

上级 76cffded
...@@ -13,6 +13,14 @@ ...@@ -13,6 +13,14 @@
} }
} }
} }
.has-uploadtip>.el-upload{
text-align: left;
}
.upload-description{
font-size: 12px;
opacity: 0.5;
color: #000;
}
} }
.upload-preview-modal{ .upload-preview-modal{
.ivu-modal{ .ivu-modal{
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
</el-col> </el-col>
<el-col :span="(rowPreview && files.length > 0) ? 12 : 24" class="upload-col"> <el-col :span="(rowPreview && files.length > 0) ? 12 : 24" class="upload-col">
<el-upload <el-upload
:class="{'has-uploadtip': !!uploadTip}"
:disabled="disabled" :disabled="disabled"
:file-list="files" :file-list="files"
:action="getAction()" :action="getAction()"
...@@ -21,7 +22,8 @@ ...@@ -21,7 +22,8 @@
<el-button v-if="!isdrag" size='small' icon='el-icon-upload2' :disabled="disabled">{{this.$t('app.fileUpload.caption')}}</el-button> <el-button v-if="!isdrag" size='small' icon='el-icon-upload2' :disabled="disabled">{{this.$t('app.fileUpload.caption')}}</el-button>
<i v-if="isdrag" class="el-icon-upload2"></i> <i v-if="isdrag" class="el-icon-upload2"></i>
<div v-if="isdrag" class="el-upload__text" v-safe-html="$t('components.appFileUpload.uploadText')"></div> <div v-if="isdrag" class="el-upload__text" v-safe-html="$t('components.appFileUpload.uploadText')"></div>
</el-upload> <div class="upload-description">{{uploadTip}}</div>
</el-upload>
</el-col> </el-col>
</el-row> </el-row>
<modal width="80%" v-model="dialogVisible" footer-hide class-name='upload-preview-modal'> <modal width="80%" v-model="dialogVisible" footer-hide class-name='upload-preview-modal'>
...@@ -192,6 +194,26 @@ export default class AppFileUpload extends Vue { ...@@ -192,6 +194,26 @@ export default class AppFileUpload extends Vue {
*/ */
@Prop() public ownerid!: string; @Prop() public ownerid!: string;
/**
* 默认文件最大上传大小
*/
@Prop() public defaultSize?:number | string ;
/**
* 允许上传的文件类型
*/
@Prop({default: ''}) public whiteList?:string;
/**
* 上传描述
*/
@Prop({default:''}) public uploadDescription?:string;
/**
* 上传文件提示
*/
public uploadTip:string = ''
/** /**
* 文件列表 * 文件列表
* *
...@@ -300,9 +322,18 @@ export default class AppFileUpload extends Vue { ...@@ -300,9 +322,18 @@ export default class AppFileUpload extends Vue {
}) })
} }
this.files.forEach((file: any) => { this.files.forEach((file: any) => {
let url = `${Environment.BaseUrl}${Environment.ExportFile}/${file.id}`; let downloadUrl = `${Environment.BaseUrl}${Environment.ExportFile}/${file.id}`;
const entityName = this.appEntityService.APPDENAME;
const base64 = `${file.id}|${entityName}|${this.ownerid}|${this.context.srfpersonid || this.context.srfuserid}`;
let url =`${downloadUrl}?key=${window.btoa(base64)}${Math.floor(
1000 + Math.random() * 9000,
)}`
if (this.export_params.length > 0) { if (this.export_params.length > 0) {
url +='?'; if (!url.includes('?')) {
url +='?';
}
this.export_params.forEach((item:any,i:any)=>{ this.export_params.forEach((item:any,i:any)=>{
url += `${Object.keys(item)[0]}=${Object.values(item)[0]}`; url += `${Object.keys(item)[0]}=${Object.values(item)[0]}`;
if(i<this.export_params.length-1){ if(i<this.export_params.length-1){
...@@ -314,6 +345,32 @@ export default class AppFileUpload extends Vue { ...@@ -314,6 +345,32 @@ export default class AppFileUpload extends Vue {
}); });
} }
/**
* 计算上传配置
*/
public calcFileUploadConfig(){
const config:{
whiteList:string[],
maxSize:number,
description:string
} = {
whiteList:[],
maxSize:10,
description:''
}
const _whiteList = this.whiteList || Environment.fileUploadWhiteList;
const _maxSize = this.defaultSize || Environment.fileUploadMaxSize;
const _description = this.uploadDescription || Environment.fileUploadDescription;
if(_whiteList){
config.whiteList = _whiteList.split(',');
}
config.maxSize = Number(_maxSize);
config.description = _description;
if(!_description && _whiteList && _whiteList.length > 0){
config.description = `${this.$t('components.appFileUpload.supportextends')}${_whiteList.split(',').map(type => `.${type?.toLowerCase()}`).join(' ')},${this.$t('components.appFileUpload.singlefile')}${_maxSize}MB`;
}
return config;
}
/** /**
...@@ -332,6 +389,8 @@ export default class AppFileUpload extends Vue { ...@@ -332,6 +389,8 @@ export default class AppFileUpload extends Vue {
} }
}); });
} }
const config = this.calcFileUploadConfig();
this.uploadTip = config.description;
} }
/** /**
...@@ -403,12 +462,27 @@ export default class AppFileUpload extends Vue { ...@@ -403,12 +462,27 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload * @memberof AppFileUpload
*/ */
public beforeUpload(file: any) { public beforeUpload(file: any) {
const config = this.calcFileUploadConfig();
const blackList = Environment.blackList; const blackList = Environment.blackList;
// 白名单
const whiteList = config.whiteList;
const fileName = file.name?.trim().toLowerCase(); const fileName = file.name?.trim().toLowerCase();
if (Array.isArray(blackList) && typeof fileName === 'string' && blackList.some(item => fileName.endsWith(`.${item}`))) { const blackResult = Array.isArray(blackList) && typeof fileName === 'string' && blackList.some(item => fileName.endsWith(`.${item}`));
const whiteResult = Array.isArray(whiteList) && typeof fileName === 'string' && whiteList.some(item => fileName.endsWith(`.${item}`));
if(whiteList.length > 0 && !whiteResult){
Message.error(`${fileName} 文件格式不正确,请上传 ${whiteList.join('、')}类型的文件`);
return false;
}
if (blackResult && !whiteResult) {
Message.error(`不可上传 ${blackList.join('、')}类型的文件!`); Message.error(`不可上传 ${blackList.join('、')}类型的文件!`);
return false; return false;
} }
if(file.size > config.maxSize * 1024 * 1024){
Message.error(`${fileName}超出文件限制大小,单个文件不能超过${config.maxSize}MB`);
return false
}
if(this.imageOnly){ if(this.imageOnly){
const imageTypes = ["image/jpeg" , "image/gif" , "image/png" , "image/bmp"]; const imageTypes = ["image/jpeg" , "image/gif" , "image/png" , "image/bmp"];
const isImage = imageTypes.some((type: any)=> Object.is(type, file.type)); const isImage = imageTypes.some((type: any)=> Object.is(type, file.type));
...@@ -490,9 +564,17 @@ export default class AppFileUpload extends Vue { ...@@ -490,9 +564,17 @@ export default class AppFileUpload extends Vue {
const downloadUrl = `${(window as any).Environment.ExportFile}`+ '/' + id + '/' + name; const downloadUrl = `${(window as any).Environment.ExportFile}`+ '/' + id + '/' + name;
const entityName = this.appEntityService.APPDENAME; const entityName = this.appEntityService.APPDENAME;
const base64 = `${id}|${entityName}|${this.ownerid}|${this.context.srfpersonid || this.context.srfuserid}`; const base64 = `${id}|${entityName}|${this.ownerid}|${this.context.srfpersonid || this.context.srfuserid}`;
const url =`${downloadUrl}?key=${window.btoa(base64)}${Math.floor( let url =`${downloadUrl}?key=${window.btoa(base64)}${Math.floor(
1000 + Math.random() * 9000, 1000 + Math.random() * 9000,
)}` )}`
if (this.export_params.length > 0) {
this.export_params.forEach((item:any,i:any)=>{
url += `${Object.keys(item)[0]}=${Object.values(item)[0]}`;
if(i<this.export_params.length-1){
url += '&';
}
})
}
// 发送get请求 // 发送get请求
Axios.get(url, { Axios.get(url, {
responseType: 'arraybuffer', responseType: 'arraybuffer',
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册