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 @@ ...@@ -8,11 +8,8 @@
<el-upload <el-upload
:disabled="disabled" :disabled="disabled"
:file-list="files" :file-list="files"
:action="uploadUrl" :action="getAction()"
:limit="multiple ? limit: 1" :headers="myHeaders"
:accept="accept"
:multiple="multiple"
:headers="{}"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:before-remove="onRemove" :before-remove="onRemove"
:on-success="onSuccess" :on-success="onSuccess"
...@@ -20,9 +17,8 @@ ...@@ -20,9 +17,8 @@
: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>
...@@ -51,17 +47,19 @@ ...@@ -51,17 +47,19 @@
</ul> </ul>
</modal> </modal>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Environment } from '@/environments/environment'; import { Environment } from '@/environments/environment';
import { CreateElement } from 'vue'; import { CreateElement } from 'vue';
import { Subject, Unsubscribable } from 'rxjs'; import { Subject, Unsubscribable } from 'rxjs';
import Axios from 'axios';
import { Message } from 'element-ui';
@Component({ @Component({
}) })
export default class AppFileUpload extends Vue { export default class AppFileUpload extends Vue {
/** /**
* 表单状态 * 表单状态
...@@ -177,44 +175,6 @@ export default class AppFileUpload extends Vue { ...@@ -177,44 +175,6 @@ 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;
/**
* 上传文件路径
*
* @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 { ...@@ -262,6 +222,30 @@ export default class AppFileUpload extends Vue {
*/ */
limitType:Array<String> = ['application/x-msdownload','text/x-sh','text/html','text/javascript'] 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 * 设置files
* *
...@@ -269,6 +253,10 @@ export default class AppFileUpload extends Vue { ...@@ -269,6 +253,10 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload * @memberof AppFileUpload
*/ */
private setFiles(value:any): void { private setFiles(value:any): void {
if(value==null){
this.files = [];
return;
}
let _files = JSON.parse(value); let _files = JSON.parse(value);
if (value && Object.prototype.toString.call(_files)=='[object Array]') { if (value && Object.prototype.toString.call(_files)=='[object Array]') {
this.files = _files; this.files = _files;
...@@ -284,8 +272,7 @@ export default class AppFileUpload extends Vue { ...@@ -284,8 +272,7 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload * @memberof AppFileUpload
*/ */
private dataProcess(): void { private dataProcess(): void {
let _url = `${(window as any).Environment.UploadFile}`;
let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
if (this.upload_params.length > 0 ) { if (this.upload_params.length > 0 ) {
_url +='?'; _url +='?';
this.upload_params.forEach((item:any,i:any)=>{ this.upload_params.forEach((item:any,i:any)=>{
...@@ -295,11 +282,8 @@ export default class AppFileUpload extends Vue { ...@@ -295,11 +282,8 @@ export default class AppFileUpload extends Vue {
} }
}) })
} }
this.uploadUrl = _url;
this.files.forEach((file: any) => { 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) { if (this.export_params.length > 0) {
url +='?'; url +='?';
this.export_params.forEach((item:any,i:any)=>{ this.export_params.forEach((item:any,i:any)=>{
...@@ -402,9 +386,11 @@ export default class AppFileUpload extends Vue { ...@@ -402,9 +386,11 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload * @memberof AppFileUpload
*/ */
public beforeUpload(file: any) { public beforeUpload(file: any) {
if(this.limitType.includes(file.type)){ const blackList = Environment.blackList;
Message.error('不可上传 html、js、 exe、sh类型的文件！') const fileName = file.name?.trim().toLowerCase();
return false if (typeof fileName === 'string' && blackList.some(item => fileName.endsWith(`.${item}`))) {
Message.error(`不可上传 ${blackList.join('、')}类型的文件！`);
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"];
...@@ -448,7 +434,8 @@ export default class AppFileUpload extends Vue { ...@@ -448,7 +434,8 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload * @memberof AppFileUpload
*/ */
public onError(error: any, file: any, fileList: any) { 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 { ...@@ -479,7 +466,52 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload * @memberof AppFileUpload
*/ */
public onDownload(file: any) { 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 { ...@@ -513,18 +545,10 @@ 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>
<style lang='less'> <style lang='less'>
@import './app-file-upload.less'; @import './app-file-upload.less';
</style> </style>
\ No newline at end of file \ No newline at end of file
src/components/disk-file-upload/disk-file-upload.vue
浏览文件 @ d8e29d2d
...@@ -2,85 +2,60 @@ ...@@ -2,85 +2,60 @@
<div id="file-upload"> <div id="file-upload">
<el-row id="el-row"> <el-row id="el-row">
<!--拖拽上传--> <!--拖拽上传-->
<el-col v-if="showDrag==true" class="withDrag"> <el-col v-if="showDrag == true" class="withDrag">
<el-upload <el-upload v-if="!disabled" ref="upload" drag multiple list-type="text" :before-upload="beforeUploadLimit"
ref="upload" :disabled="disabled" :action="getAction()" :headers="myHeaders" :file-list="uploadFileList"
drag :show-file-list="false" :on-error="onError" :on-success="onSuccess">
multiple
list-type="text"
:disabled="disabled"
:action="getAction()"
:headers="myHeaders"
:before-upload="beforeUpload"
:file-list="uploadFileList"
:show-file-list="false"
:http-request="customUploadFile">
<div> <div>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div> <div>
<span>{{$t('components.diskFileUpload.fileDrag')}}</span> <span>{{ $t('components.diskFileUpload.fileDrag') }}</span>
<span style="color:#409EFF;">{{$t('components.diskFileUpload.clickUpload')}}</span> <span style="color:#409EFF;">{{ $t('components.diskFileUpload.clickUpload') }}</span>
</div> </div>
</div> </div>
</el-upload> </el-upload>
</el-col> </el-col>
<!--点击上传--> <!--点击上传-->
<el-col v-else class="withoutDrag"> <el-col v-else class="withoutDrag">
<el-upload <el-upload v-if="!disabled" ref="upload" multiple list-type="text" :before-upload="beforeUploadLimit"
ref="upload" :disabled="disabled" :action="getAction()" :headers="myHeaders" :file-list="uploadFileList"
multiple :show-file-list="false" :on-error="onError" :on-success="onSuccess">
list-type="text" <el-button type="primary" size="small" icon="el-icon-upload">
:disabled="disabled" {{ $t('components.diskFileUpload.clickUpload') }}
:action="getAction()"
:headers="myHeaders"
:before-upload="beforeUpload"
:file-list="uploadFileList"
:show-file-list="false"
:http-request="customUploadFile">
<el-button type="primary" size="small" icon="el-icon-upload" :disabled="disabled">
{{$t('components.diskFileUpload.clickUpload')}}
</el-button> </el-button>
</el-upload> </el-upload>
</el-col> </el-col>
<!--文件操作--> <!--文件操作-->
<el-col v-for="(item,index) in uploadFileList" :key="index" class="fileList"> <el-col v-for="(item, index) in uploadFileList" :key="index" class="fileList">
<div class="fileTitle"> <div class="fileTitle">
<i class="el-icon-document"></i> <i class="el-icon-document"></i>
<span>{{item.name}}</span> <span>{{ item.name }}</span>
</div> </div>
<div class="fileMain"> <div class="fileMain">
<el-link type="success" icon="el-icon-download" @click="onDownload(item)"> <el-link type="success" v-show="showDownload" icon="el-icon-download" @click="onDownload(item)">
{{$t('components.diskFileUpload.load')}} {{ $t('components.diskFileUpload.load') }}
</el-link> </el-link>
<el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)"> <el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)">
{{$t('components.diskFileUpload.preview')}} {{ $t('components.diskFileUpload.preview') }}
</el-link> </el-link>
<el-link type="primary" icon="el-icon-edit" <el-link type="primary" icon="el-icon-edit"
v-show="showEdit && (item.name.match(/^.+\.(doc|DOC|docx|DOCX|wps|WPS|xls|XLS|xlsx|XLSX|ppt|PPT|et|ET)$/))" v-show="showEdit && (item.name.match(/^.+\.(doc|DOC|docx|DOCX|wps|WPS|xls|XLS|xlsx|XLSX|ppt|PPT|et|ET)$/))"
@click="onEdit(item)">{{$t('components.diskFileUpload.edit')}} @click="onEdit(item)">{{ $t('components.diskFileUpload.edit') }}
</el-link> </el-link>
<el-link icon="el-icon-camera" <el-link icon="el-icon-camera"
v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))" v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))"
@click="onOcr(item)">OCR @click="onOcr(item)">OCR
</el-link> </el-link>
<el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)"> <el-link type="danger" v-show="showDelete" icon="el-icon-delete" @click="onRemove(item, index)">
{{$t('components.diskFileUpload.delete')}} {{ $t('components.diskFileUpload.delete') }}
</el-link> </el-link>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!-- 自定义弹框 --> <!-- 自定义弹框 -->
<div class="dialogDiv"> <div class="dialogDiv">
<el-dialog <el-dialog :title="dialogTitle" center width="70%" top="5vh" :visible="showDialog" :close-on-click-modal="true"
:title="dialogTitle" :show-close="true" :before-close="dialogClose" :modal-append-to-body="false">
center
width="70%"
top="5vh"
:visible="showDialog"
:close-on-click-modal="true"
:show-close="true"
:before-close="dialogClose"
:modal-append-to-body="false">
<div style="height: 100%;"> <div style="height: 100%;">
<iframe id="fileIframe" :src="iframeUrl" frameborder="0" width="100%"></iframe> <iframe id="fileIframe" :src="iframeUrl" frameborder="0" width="100%"></iframe>
</div> </div>
...@@ -90,13 +65,15 @@ ...@@ -90,13 +65,15 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {Component, Vue, Prop, Watch} from 'vue-property-decorator'; import { Component, Vue, Prop } from 'vue-property-decorator';
import {Button, Row, Col, Link, Icon, Upload, Message, MessageBox} from 'element-ui'; import { Message, MessageBox } from 'element-ui';
import Axios from 'axios'; import Axios from 'axios';
import {Subject, Unsubscribable} from 'rxjs'; import { Unsubscribable } from 'rxjs';
import { Environment } from '@/environments/environment';
import { encode } from "js-base64";
@Component({}) @Component({})
export default class DiskFileUpload extends Vue { export default class DiskFileUpload extends Vue {
/** /**
* 当前表单对象 * 当前表单对象
...@@ -160,7 +137,7 @@ ...@@ -160,7 +137,7 @@
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public persistence?: boolean; @Prop({ default: false }) public persistence?: boolean;
/** /**
* 是否启用 * 是否启用
...@@ -168,7 +145,7 @@ ...@@ -168,7 +145,7 @@
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public disabled?: boolean; @Prop({ default: false }) public disabled?: boolean;
/** /**
* 是否显示拖拽区域 * 是否显示拖拽区域
...@@ -176,15 +153,31 @@ ...@@ -176,15 +153,31 @@
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public showDrag?: boolean; @Prop({ default: false }) public showDrag?: boolean;
/** /**
* 是否显示预览按钮 * 是否显示删除按钮
* *
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public showPreview?: boolean; @Prop({ default: false }) public showDownload?: boolean;
/**
* 是否显示删除按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({ default: false }) public showDelete?: boolean;
/**
* 是否显示按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({ default: false }) public showPreview?: boolean;
/** /**
* 是否显示在线编辑按钮 * 是否显示在线编辑按钮
...@@ -192,7 +185,7 @@ ...@@ -192,7 +185,7 @@
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public showEdit?: boolean; @Prop({ default: false }) public showEdit?: boolean;
/** /**
* 是否显示OCR按钮 * 是否显示OCR按钮
...@@ -200,7 +193,7 @@ ...@@ -200,7 +193,7 @@
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public showOcrview?: boolean; @Prop({ default: false }) public showOcrview?: boolean;
/** /**
* 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存） * 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
...@@ -233,7 +226,7 @@ ...@@ -233,7 +226,7 @@
* @type {*} * @type {*}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public myHeaders: any = {Authorization: this.token}; public myHeaders: any = { Authorization: this.token };
/** /**
* 表单状态事件 * 表单状态事件
...@@ -283,14 +276,6 @@ ...@@ -283,14 +276,6 @@
*/ */
public iframeUrl: any = ''; public iframeUrl: any = '';
/**
* 文件上传限制类型
*
* @type {*}
* @memberof DiskFileUpload
*/
limitType:Array<String> = ['application/x-msdownload','text/x-sh','text/html','text/javascript']
/** /**
* 关闭自定义弹框 * 关闭自定义弹框
* *
...@@ -304,6 +289,14 @@ ...@@ -304,6 +289,14 @@
iframe.parentNode.removeChild("fileIframe"); iframe.parentNode.removeChild("fileIframe");
} }
/**
* 文件上传限制类型
*
* @type {*}
* @memberof DiskFileUpload
*/
limitType: Array<String> = ['application/x-msdownload', 'text/x-sh', 'text/html', 'text/javascript']
/** /**
* 拼接上传路径 * 拼接上传路径
* *
...@@ -411,6 +404,71 @@ ...@@ -411,6 +404,71 @@
}); });
} }
/**
* 上传成功回调
*
* @param {*} response
* @param {*} file
* @param {*} fileList
* @memberof AppFileUpload
*/
public onSuccess(response: any, file: any, fileList: any) {
if (!response) {
return;
}
// 返回的是一个jsonobject
// 新建表单上传，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
// 保存到文件列表进行显示
this.uploadFileList.push(response);
// persistence=true时需要持久化表单属性
if (this.persistence == true && this.uploadFileList.length > 0) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', { name: this.formItemName, value: value });
}
}
/**
* 上传失败回调
*
* @param {*} error
* @param {*} file
* @param {*} fileList
* @memberof AppFileUpload
*/
public onError(error: any, file: any, fileList: any) {
const data = JSON.parse(error.message)
this.$Notice.error({ title: data.message || (this.$t('components.appFileUpload.uploadError') as any) });
}
str2utf8(str: string) {
const encoder = new TextEncoder();
const bytes = encoder.encode(str)
let result = '';
for (let i = 0; i < bytes.length; i++) {
result += String.fromCharCode(bytes[i])
}
return result
}
/**
* 上传之前
*
* @param {*} file
* @memberof AppFileUpload
*/
beforeUploadLimit(file: any) {
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;
}
return true;
}
/** /**
* 自定义上传文件 * 自定义上传文件
* *
...@@ -427,7 +485,7 @@ ...@@ -427,7 +485,7 @@
// 拼接url // 拼接url
const uploadUrl = this.getAction(); const uploadUrl = this.getAction();
// 发送post请求 // 发送post请求
Axios.post(uploadUrl, formData).then((response: any) => { Axios.post(uploadUrl, formData, { timeout: 6000 }).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + '!'); Message.error(_this.$t('components.diskFileUpload.loadFailure') + '!');
} }
...@@ -442,7 +500,7 @@ ...@@ -442,7 +500,7 @@
// persistence=true时需要持久化表单属性 // persistence=true时需要持久化表单属性
if (this.persistence == true && this.uploadFileList.length > 0) { if (this.persistence == true && this.uploadFileList.length > 0) {
const value = JSON.stringify(this.uploadFileList); const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value}); this.$emit('formitemvaluechange', { name: this.formItemName, value: value });
} }
} }
}).catch((error: any) => { }).catch((error: any) => {
...@@ -450,20 +508,6 @@ ...@@ -450,20 +508,6 @@
}) })
} }
/**
* 上传之前
*
* @param file
* @memberof DiskFileUpload
*/
public beforeUpload(file:any){
if(this.limitType.includes(file.type)){
Message.error('不可上传 html、js、 exe、sh类型的文件！')
return false
}
return true
}
/** /**
* 下载文件 * 下载文件
* *
...@@ -475,7 +519,7 @@ ...@@ -475,7 +519,7 @@
let _this: any = this; let _this: any = this;
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id); const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename); const name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename);
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name; const downloadUrl = '/ibizutilrpm/download/' + this.getFolder() + '/' + id + '/' + name;
// 发送get请求 // 发送get请求
Axios.get(downloadUrl, { Axios.get(downloadUrl, {
headers: { headers: {
...@@ -492,18 +536,24 @@ ...@@ -492,18 +536,24 @@
// 获取文件名 // 获取文件名
const disposition = response.headers['content-disposition']; const disposition = response.headers['content-disposition'];
const filename = disposition.split('filename=')[1]; const filename = disposition.split('filename=')[1];
const filenameArr = filename.split('.')
const itemname = item.name.split('.')
const docType = '.' + filenameArr[filenameArr.length - 1]
itemname.splice(itemname.length - 1, 1, docType)
const actualFileName = itemname.join('');
// 用blob对象获取文件流 // 用blob对象获取文件流
let blob = new Blob([response.data], {type: response.headers['content-type']}); 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); var href = URL.createObjectURL(blob);
// 创建一个a元素并设置相关属性 // 创建一个a元素并设置相关属性
let a = document.createElement('a'); let a = document.createElement('a');
a.href = href; a.href = href;
if (name) { a.download = actualFileName;
a.download = name;
} else {
a.download = filename;
}
// 添加a元素到当前网页 // 添加a元素到当前网页
document.body.appendChild(a); document.body.appendChild(a);
// 触发a元素的点击事件，实现下载 // 触发a元素的点击事件，实现下载
...@@ -530,20 +580,15 @@ ...@@ -530,20 +580,15 @@
// 拼接url // 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id); const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name); const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
let previewUrl = '/net-disk/preview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
Axios.get(previewUrl).then((response: any) => { const downloadUrl = (window as any).Environment.ExportFile + '/' + id + '/' + name;
if (!response || response.status != 200) { const previewFileUrl = Environment.previewFileUrl;
return; if (previewFileUrl) {
} const url = encodeURIComponent(encode(`${window.location.origin}${downloadUrl}?fullfilename=${name}`));
// 返回一个url，通过自定义弹框打开
if (response.data) {
this.dialogTitle = name; this.dialogTitle = name;
this.showDialog = true; this.showDialog = true;
this.iframeUrl = response.data; this.iframeUrl = `${previewFileUrl}/onlinePreview?url=${url}`;
} }
}).catch((error: any) => {
Message.error(error);
});
} }
/** /**
...@@ -613,8 +658,8 @@ ...@@ -613,8 +658,8 @@
this.uploadFileList.splice(index, 1); this.uploadFileList.splice(index, 1);
// persistence=true时需要持久化表单属性 // persistence=true时需要持久化表单属性
if (this.persistence == true) { if (this.persistence == true) {
const value = JSON.stringify(this.uploadFileList); const value = this.uploadFileList.length == 0 ? null : JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value}); this.$emit('formitemvaluechange', { name: this.formItemName, value: value });
} }
}).catch((error: any) => { }).catch((error: any) => {
// 提示删除失败 // 提示删除失败
...@@ -653,60 +698,61 @@ ...@@ -653,60 +698,61 @@
Message.error(_this.$t('components.diskFileUpload.updateFailure') + ':' + error); Message.error(_this.$t('components.diskFileUpload.updateFailure') + ':' + error);
}); });
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
#file-upload { #file-upload {
width: auto; width: auto;
height: auto; height: auto;
border: 0px solid black; border: 0px solid black;
} }
#el-row { #el-row {
border: 0px solid red; border: 0px solid red;
width: 400px; width: 400px;
} }
.withDrag { .withDrag {
border: 0px solid grey; border: 0px solid grey;
width: 400px; width: 400px;
} }
.withoutDrag { .withoutDrag {
border: 0px solid grey; border: 0px solid grey;
width: 400px; width: 400px;
text-align: left; text-align: left;
padding-left: 0px; padding-left: 0px;
padding-top: 0px; padding-top: 0px;
margin-top: 0px; margin-top: 0px;
} }
.fileList { .fileList {
width: 400px; width: 400px;
border: 0px solid grey; border: 0px solid grey;
margin-top: 0px; margin-top: 0px;
} }
.fileTitle { .fileTitle {
text-align: left; text-align: left;
margin-left: 0px; margin-left: 0px;
} }
.fileTitle i { .fileTitle i {
margin-right: 5px; margin-right: 5px;
} }
.fileMain { .fileMain {
text-align: left; text-align: left;
margin-left: 0px; margin-left: 0px;
margin-top: -10px; margin-top: -10px;
} }
.fileMain .el-link:nth-child(n+2) { .fileMain .el-link:nth-child(n+2) {
margin-left: 10px; margin-left: 10px;
} }
.dialogDiv {
.dialogDiv {
// el-dialog头部 // el-dialog头部
.el-dialog__header { .el-dialog__header {
height: 40px; height: 40px;
...@@ -731,6 +777,5 @@ ...@@ -731,6 +777,5 @@
#fileIframe { #fileIframe {
height: calc(100% - 40px); height: calc(100% - 40px);
} }
} }
</style> </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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或