Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 d8e29d2d 编写于 作者: fzh's avatar fzh
浏览文件
操作

update: 修改限制文件上传类型

上级 9fbb2bc9
展开全部 显示空白字符变更
内嵌 并排
正在显示 包含 1299 行增加 和 1174 行删除
src/components/app-file-upload/app-file-upload.vue
浏览文件 @ d8e29d2d
......@@ -8,11 +8,8 @@
<el-upload
:disabled="disabled"
:file-list="files"
:action="uploadUrl"
:limit="multiple ? limit: 1"
:accept="accept"
:multiple="multiple"
:headers="{}"
:action="getAction()"
:headers="myHeaders"
:before-upload="beforeUpload"
:before-remove="onRemove"
:on-success="onSuccess"
......@@ -20,9 +17,8 @@
: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>
......@@ -51,17 +47,19 @@
</ul>
</modal>
</div>
</template>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Environment } from '@/environments/environment';
import { CreateElement } from 'vue';
import { Subject, Unsubscribable } from 'rxjs';
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Environment } from '@/environments/environment';
import { CreateElement } from 'vue';
import { Subject, Unsubscribable } from 'rxjs';
import Axios from 'axios';
import { Message } from 'element-ui';
@Component({
})
export default class AppFileUpload extends Vue {
@Component({
})
export default class AppFileUpload extends Vue {
/**
* 表单状态
......@@ -177,44 +175,6 @@ 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;
/**
* 上传文件路径
*
* @memberof AppFileUpload
*/
public uploadUrl = Environment.BaseUrl + Environment.UploadFile;
/**
* 下载文件路径
*
* @memberof AppFileUpload
*/
public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
/**
* 文件列表
*
......@@ -262,6 +222,30 @@ export default class AppFileUpload extends Vue {
*/
limitType:Array<String> = ['application/x-msdownload','text/x-sh','text/html','text/javascript']
/**
* 当前登陆人的token
*
* @type {string}
* @memberof DiskFileUpload
*/
public token: string = "Bearer " + localStorage.getItem('token');
/**
* 上传文件请求头
*
* @type {*}
* @memberof DiskFileUpload
*/
public myHeaders: any = {Authorization: this.token};
/**
* 拼接上传路径
*
* @memberof DiskFileUpload
*/
public getAction() {
return `${(window as any).Environment.UploadFile}`+ '?ownertype=' + this.name + '&ownerid=' + JSON.parse(this.data).srfkey;
}
/**
* 设置files
*
......@@ -269,6 +253,10 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload
*/
private setFiles(value:any): void {
if(value==null){
this.files = [];
return;
}
let _files = JSON.parse(value);
if (value && Object.prototype.toString.call(_files)=='[object Array]') {
this.files = _files;
......@@ -284,8 +272,7 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload
*/
private dataProcess(): void {
let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
let _url = `${(window as any).Environment.UploadFile}`;
if (this.upload_params.length > 0 ) {
_url +='?';
this.upload_params.forEach((item:any,i:any)=>{
......@@ -295,11 +282,8 @@ export default class AppFileUpload extends Vue {
}
})
}
this.uploadUrl = _url;
this.files.forEach((file: any) => {
let url = `${this.downloadUrl}/${file.id}`;
let url = `${(window as any).Environment.ExportFile}/${file.id}`;
if (this.export_params.length > 0) {
url +='?';
this.export_params.forEach((item:any,i:any)=>{
......@@ -402,9 +386,11 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload
*/
public beforeUpload(file: any) {
if(this.limitType.includes(file.type)){
Message.error('不可上传 html、js、 exe、sh类型的文件！')
return false
const blackList = Environment.blackList;
const fileName = file.name?.trim().toLowerCase();
if (typeof fileName === 'string' && blackList.some(item => fileName.endsWith(`.${item}`))) {
Message.error(`不可上传 ${blackList.join('、')}类型的文件！`);
return false;
}
if(this.imageOnly){
const imageTypes = ["image/jpeg" , "image/gif" , "image/png" , "image/bmp"];
......@@ -448,7 +434,8 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload
*/
public onError(error: any, file: any, fileList: any) {
this.$Notice.error({ title: (this.$t('components.appFileUpload.uploadError') as any) });
const data = JSON.parse(error.message)
this.$Notice.error({ title: data.message || (this.$t('components.appFileUpload.uploadError') as any)});
}
/**
......@@ -479,7 +466,52 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload
*/
public onDownload(file: any) {
window.open(file.url);
// 拼接url
let _this: any = this;
const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
const name = typeof file.name == "string" ? file.name : JSON.stringify(file.filename);
const downloadUrl = `${(window as any).Environment.ExportFile}`+ '/' + id + '/' + name;
// 发送get请求
Axios.get(downloadUrl, {
responseType: 'arraybuffer',
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.downloadFile') + '!');
return;
}
// 请求成功，后台返回的是一个文件流
if (response.data) {
// 获取文件名
const disposition = response.headers['content-disposition'];
const filename = disposition.split('filename=')[1];
const actualFileName = file.name || filename;
// 用blob对象获取文件流
let blob = new Blob([response.data], {type: response.headers['content-type']});
// 兼容ie语法
if('msSaveOrOpenBlob' in navigator){
window.navigator.msSaveOrOpenBlob(blob, actualFileName);
return;
}
// 通过文件流创建下载链接
var href = URL.createObjectURL(blob);
// 创建一个a元素并设置相关属性
let a = document.createElement('a');
a.href = href;
a.download = actualFileName;
// 添加a元素到当前网页
document.body.appendChild(a);
// 触发a元素的点击事件，实现下载
a.click();
// 从当前网页移除a元素
document.body.removeChild(a);
// 释放blob对象
URL.revokeObjectURL(href);
} else {
Message.error(_this.$t('components.diskFileUpload.downloadFile1'));
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.downloadFile') + ':' + error);
});
}
/**
......@@ -513,18 +545,10 @@ 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>
}
</script>
<style lang='less'>
@import './app-file-upload.less';
</style>
\ No newline at end of file
<style lang='less'>
@import './app-file-upload.less';
</style>
\ No newline at end of file
src/environment/environment.ts 0 → 100644
浏览文件 @ d8e29d2d
export const Environment = {
// 原型示例数模式
SampleMode: false,
// 应用名称
AppName: 'rpm',
// 应用 title
AppTitle: '制度流程管理系统',
// 应用基础路径
BaseUrl: '',
// 系统名称
SysName: 'rpm',
// 远程登录地址，本地开发调试使用
RemoteLogin: '/ibizutil/login',
// 文件导出
ExportFile: '/ibizutil/download',
// 文件上传
UploadFile: '/ibizutil/upload',
// 数据导入单次上传最大数量
sliceUploadCnt: 100,
// 是否为pc端应用
isAppMode:true,
//统一地址
uniteAddress:"http://172.16.100.202:8114",
// 是否为开发模式
devMode: true,
// 是否开启权限认证
enablePermissionValid:false,
// 菜单权限模式，可选值：RT(RT模式),RESOURCE(资源模式),MINIX(混合模式),默认MINIX
menuPermissionMode:"MINIX",
// 项目模板地址
ProjectUrl: "http://demo.ibizlab.cn/ibizr7pfstdtempl/ibizvuer7",
// 打开目标工具，可选参数：sln、mos
debugOpenMode:'mos',
// 配置平台地址
StudioUrl: "http://172.16.170.145/mos/",
// 中心标识
SlnId: "B4BF5C84-D020-4D9A-A986-8FA4FD72816C",
// 系统标识
SysId: "B428B5BE-EA90-4101-A493-BA7085D89F0A",
// 前端应用标识
AppId: "6e0b7357169ef4eba84e1347ed94bd84",
// 项目发布文件地址
PublishProjectUrl: 'http://ibiz.ibizee.cn/t7d01aab0f300e1f75fad0314e98cecab/RPM.git',
// ibiz开放平台地址
ibizlabtUrl: 'https://www.ibizlab.cn',
// ibiz论坛地址
ibizbbstUrl: 'https://bbs.ibizlab.cn',
// 是否启用工作流
workflow: false,
previewFileUrl:'http://172.16.103.143:8013',
blackList: ['html', 'js', 'exe', 'sh', 'bat', 'css', 'htm', 'aspx', 'jsp', 'asp', 'php']
};
// 挂载外部配置文件
if ((window as any).Environment) {
Object.assign(Environment, (window as any).Environment);
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或