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
<template>
<div class="app-file-upload">
<el-row>
<el-col v-if="rowPreview && files.length > 0" :span="12" class="upload-col">
<el-button size='small' class="button-preview" icon='el-icon-view' :disabled="disabled" @click="()=>{this.dialogVisible = true;}">{{$t('components.appFileUpload.preview')}}<Badge :count="files.length" type="info"></Badge></el-button>
</el-col>
<el-col :span="(rowPreview && files.length > 0) ? 12 : 24" class="upload-col">
<el-upload
:disabled="disabled"
:file-list="files"
:action="uploadUrl"
:limit="multiple ? limit: 1"
:accept="accept"
:multiple="multiple"
:headers="{}"
:before-upload="beforeUpload"
:before-remove="onRemove"
:on-success="onSuccess"
:on-error="onError"
: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>
<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>
</el-col>
</el-row>
<modal width="80%" v-model="dialogVisible" footer-hide class-name='upload-preview-modal'>
<ul class="">
<li v-for="(file,index) in files" :key="index" class="preview-file-list-item">
<div class='preview-file-list-img'>
<el-image :src="file.url" class='' style=''>
<div slot='error' class='image-slot'>
<img src="/assets/img/picture.png" style='width:100%;height:100%;'>
</div>
</el-image>
<div class='preview-file-list-actions' @mouseenter="()=>{showActions = true;}" @mouseleave="()=>{showActions = false;}">
<span v-show="showActions" class='action-download'>
<i class='el-icon-download' @click="onDownload(file)"></i>
</span>
<span v-show="showActions" :style="{ 'display': disabled? 'none' : 'inline-block' }" class='action-delete'>
<i class='el-icon-delete' @click="onRemove(file, files)"></i>
</span>
<div class="app-file-upload">
<el-row>
<el-col v-if="rowPreview && files.length > 0" :span="12" class="upload-col">
<el-button size='small' class="button-preview" icon='el-icon-view' :disabled="disabled" @click="()=>{this.dialogVisible = true;}">{{$t('components.appFileUpload.preview')}}<Badge :count="files.length" type="info"></Badge></el-button>
</el-col>
<el-col :span="(rowPreview && files.length > 0) ? 12 : 24" class="upload-col">
<el-upload
:disabled="disabled"
:file-list="files"
:action="getAction()"
:headers="myHeaders"
:before-upload="beforeUpload"
:before-remove="onRemove"
:on-success="onSuccess"
:on-error="onError"
:on-preview="onDownload"
:drag="isdrag"
:show-file-list="!rowPreview"
>
<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>
</el-col>
</el-row>
<modal width="80%" v-model="dialogVisible" footer-hide class-name='upload-preview-modal'>
<ul class="">
<li v-for="(file,index) in files" :key="index" class="preview-file-list-item">
<div class='preview-file-list-img'>
<el-image :src="file.url" class='' style=''>
<div slot='error' class='image-slot'>
<img src="/assets/img/picture.png" style='width:100%;height:100%;'>
</div>
</el-image>
<div class='preview-file-list-actions' @mouseenter="()=>{showActions = true;}" @mouseleave="()=>{showActions = false;}">
<span v-show="showActions" class='action-download'>
<i class='el-icon-download' @click="onDownload(file)"></i>
</span>
<span v-show="showActions" :style="{ 'display': disabled? 'none' : 'inline-block' }" class='action-delete'>
<i class='el-icon-delete' @click="onRemove(file, files)"></i>
</span>
</div>
</div>
</div>
<div class="file-name">{{file.name}}</div>
</li>
</ul>
</modal>
</div>
</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';
@Component({
})
export default class AppFileUpload extends Vue {
/**
* 表单状态
*
* @type {Subject<any>}
* @memberof AppFileUpload
*/
@Prop() public formState?: Subject<any>
/**
* 是否忽略表单项书香值变化
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop() public ignorefieldvaluechange?: boolean;
/**
* 是否支持拖拽
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop() public isdrag?: boolean;
/**
* 表单状态事件
*
* @private
* @type {(Unsubscribable | undefined)}
* @memberof AppFileUpload
*/
private formStateEvent: Unsubscribable | undefined;
/**
* 表单数据
*
* @type {string}
* @memberof AppFileUpload
*/
@Prop() public data!: string;
/**
* 视图参数
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop() public viewparams!: any;
/**
* 视图上下文
*
* @type {*}
* @memberof AppAutocomplete
*/
@Prop() public context!: any;
/**
* 初始化值
*
* @type {*}
* @memberof AppFileUpload
*/
@Prop() public value?: any;
/**
* 数据值变化
*
* @param {*} newval
* @param {*} val
* @memberof AppFileUpload
*/
@Watch('value')
onValueChange(newval: any, val: any) {
if (this.ignorefieldvaluechange) {
return;
}
this.getParams();
this.setFiles(newval);
this.dataProcess();
}
/**
* 所属表单项名称
*
* @type {string}
* @memberof AppFileUpload
*/
@Prop() public name!: string;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop() public disabled?: boolean;
/**
* 上传参数
*
* @type {string}
* @memberof AppFileUpload
*/
@Prop() public uploadparams?: any;
/**
* 下载参数
*
* @type {string}
* @memberof AppFileUpload
*/
@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;
/**
* 文件列表
*
* @memberof AppFileUpload
*/
public files = [];
/**
* 上传params
*
* @type {Array<any>}
* @memberof AppFileUpload
*/
public upload_params: Array<any> = [];
/**
* 导出params
*
* @type {Array<any>}
* @memberof AppFileUpload
*/
public export_params: Array<any> = [];
/**
* 自定义数组
*
* @type {Array<any>}
* @memberof AppFileUpload
*/
public custom_arr: Array<any> = [];
/**
* 应用参数
*
* @type {*}
* @memberof AppImageUpload
*/
public appData: any;
/**
* 文件上传限制类型
*
* @type {*}
* @memberof DiskFileUpload
*/
limitType:Array<String> = ['application/x-msdownload','text/x-sh','text/html','text/javascript']
/**
* 设置files
*
* @private
* @memberof AppFileUpload
*/
private setFiles(value:any): void {
let _files = JSON.parse(value);
if (value && Object.prototype.toString.call(_files)=='[object Array]') {
this.files = _files;
} else {
this.files = [];
}
}
/**
* 数据处理
*
* @private
* @memberof AppFileUpload
*/
private dataProcess(): void {
let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
if (this.upload_params.length > 0 ) {
_url +='?';
this.upload_params.forEach((item:any,i:any)=>{
_url += `${Object.keys(item)[0]}=${Object.values(item)[0]}`;
if(i<this.upload_params.length-1){
_url += '&';
}
})
}
this.uploadUrl = _url;
this.files.forEach((file: any) => {
let url = `${this.downloadUrl}/${file.id}`;
if (this.export_params.length > 0) {
url +='?';
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 += '&';
}
})
}
file.url = url;
});
}
/**
* vue 生命周期
*
* @memberof AppFileUpload
*/
public created() {
if (this.formState) {
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成
if (Object.is($event.type, 'load')) {
this.getParams();
this.setFiles(this.value);
this.dataProcess();
}
});
}
}
/**
* vue 生命周期
*
* @returns
* @memberof AppFileUpload
*/
public mounted() {
this.appData = this.$store.getters.getAppData();
this.getParams();
this.setFiles(this.value);
this.dataProcess();
}
/**
*获取上传，导出参数
*
*@memberof AppFileUpload
*/
public getParams(){
let uploadparams: any = JSON.parse(JSON.stringify(this.uploadparams));
let exportparams: any = JSON.parse(JSON.stringify(this.exportparams));
let upload_params: Array<string> = [];
let export_params: Array<string> = [];
let param:any = this.viewparams;
let context:any = this.context;
let _data:any = JSON.parse(this.data);
if (this.uploadparams && !Object.is(this.uploadparams, '')) {
upload_params = this.$util.computedNavData(_data,param,context,uploadparams);
}
if (this.exportparams && !Object.is(this.exportparams, '')) {
export_params = this.$util.computedNavData(_data,param,context,exportparams);
}
this.upload_params = [];
this.export_params = [];
for (const item in upload_params) {
this.upload_params.push({
[item]:upload_params[item]
})
}
for (const item in export_params) {
this.export_params.push({
[item]:export_params[item]
})
}
}
/**
* 组件销毁
*
* @memberof AppFileUpload
*/
public destroyed(): void {
if (this.formStateEvent) {
this.formStateEvent.unsubscribe();
}
}
/**
* 上传之前
*
* @param {*} file
* @memberof AppFileUpload
*/
public beforeUpload(file: any) {
if(this.limitType.includes(file.type)){
Message.error('不可上传 html、js、 exe、sh类型的文件！')
return false
}
if(this.imageOnly){
const imageTypes = ["image/jpeg" , "image/gif" , "image/png" , "image/bmp"];
const isImage = imageTypes.some((type: any)=> Object.is(type, file.type));
if (!isImage) {
this.$Notice.error({ title: (this.$t('components.appFileUpload.fileTypeErrorTitle') as any) ,desc: (this.$t('components.appFileUpload.fileTypeErrorInfo') as any)});
}
return isImage;
}
}
/**
* 上传成功回调
*
* @param {*} response
* @param {*} file
* @param {*} fileList
* @memberof AppFileUpload
*/
public onSuccess(response: any, file: any, fileList: any) {
if (!response) {
return;
}
const data = { name: response.filename, id: response.fileid };
let arr: Array<any> = [];
this.files.forEach((_file:any) => {
arr.push({name: _file.name, id: _file.id})
});
arr.push(data);
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
/**
* 上传失败回调
*
* @param {*} error
* @param {*} file
* @param {*} fileList
* @memberof AppFileUpload
*/
public onError(error: any, file: any, fileList: any) {
this.$Notice.error({ title: (this.$t('components.appFileUpload.uploadError') as any) });
}
/**
* 删除文件
*
* @param {*} file
* @param {*} fileList
* @memberof AppFileUpload
*/
public onRemove(file: any, fileList: any) {
let arr: Array<any> = [];
fileList.forEach((f: any) => {
if (f.id != file.id) {
arr.push({ name: f.name, id: f.id });
}
});
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
if(arr.length == 0){
this.dialogVisible = false;
}
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
/**
* 下载文件
*
* @param {*} file
* @memberof AppFileUpload
*/
public onDownload(file: any) {
window.open(file.url);
}
/**
* 是否只支持图片上传
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop({default: false}) public imageOnly!: boolean;
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop({default: false}) public rowPreview!: boolean;
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
public dialogVisible: boolean = false;
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
public showActions: boolean = false;
/**
* 处理多选超出
*
* @memberof AppFileUpload
*/
public handleExceed(files: any, fileList: any) {
this.$message.warning(`${this.$t('components.appFileUpload.limitselect')} ${this.limit}`);
}
}
</script>
<style lang='less'>
@import './app-file-upload.less';
</style>
\ No newline at end of file
<div class="file-name">{{file.name}}</div>
</li>
</ul>
</modal>
</div>
</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';
import Axios from 'axios';
import { Message } from 'element-ui';
@Component({
})
export default class AppFileUpload extends Vue {
/**
* 表单状态
*
* @type {Subject<any>}
* @memberof AppFileUpload
*/
@Prop() public formState?: Subject<any>
/**
* 是否忽略表单项书香值变化
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop() public ignorefieldvaluechange?: boolean;
/**
* 是否支持拖拽
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop() public isdrag?: boolean;
/**
* 表单状态事件
*
* @private
* @type {(Unsubscribable | undefined)}
* @memberof AppFileUpload
*/
private formStateEvent: Unsubscribable | undefined;
/**
* 表单数据
*
* @type {string}
* @memberof AppFileUpload
*/
@Prop() public data!: string;
/**
* 视图参数
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop() public viewparams!: any;
/**
* 视图上下文
*
* @type {*}
* @memberof AppAutocomplete
*/
@Prop() public context!: any;
/**
* 初始化值
*
* @type {*}
* @memberof AppFileUpload
*/
@Prop() public value?: any;
/**
* 数据值变化
*
* @param {*} newval
* @param {*} val
* @memberof AppFileUpload
*/
@Watch('value')
onValueChange(newval: any, val: any) {
if (this.ignorefieldvaluechange) {
return;
}
this.getParams();
this.setFiles(newval);
this.dataProcess();
}
/**
* 所属表单项名称
*
* @type {string}
* @memberof AppFileUpload
*/
@Prop() public name!: string;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop() public disabled?: boolean;
/**
* 上传参数
*
* @type {string}
* @memberof AppFileUpload
*/
@Prop() public uploadparams?: any;
/**
* 下载参数
*
* @type {string}
* @memberof AppFileUpload
*/
@Prop() public exportparams?: any;
/**
* 文件列表
*
* @memberof AppFileUpload
*/
public files = [];
/**
* 上传params
*
* @type {Array<any>}
* @memberof AppFileUpload
*/
public upload_params: Array<any> = [];
/**
* 导出params
*
* @type {Array<any>}
* @memberof AppFileUpload
*/
public export_params: Array<any> = [];
/**
* 自定义数组
*
* @type {Array<any>}
* @memberof AppFileUpload
*/
public custom_arr: Array<any> = [];
/**
* 应用参数
*
* @type {*}
* @memberof AppImageUpload
*/
public appData: any;
/**
* 文件上传限制类型
*
* @type {*}
* @memberof DiskFileUpload
*/
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
*
* @private
* @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;
} else {
this.files = [];
}
}
/**
* 数据处理
*
* @private
* @memberof AppFileUpload
*/
private dataProcess(): void {
let _url = `${(window as any).Environment.UploadFile}`;
if (this.upload_params.length > 0 ) {
_url +='?';
this.upload_params.forEach((item:any,i:any)=>{
_url += `${Object.keys(item)[0]}=${Object.values(item)[0]}`;
if(i<this.upload_params.length-1){
_url += '&';
}
})
}
this.files.forEach((file: any) => {
let url = `${(window as any).Environment.ExportFile}/${file.id}`;
if (this.export_params.length > 0) {
url +='?';
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 += '&';
}
})
}
file.url = url;
});
}
/**
* vue 生命周期
*
* @memberof AppFileUpload
*/
public created() {
if (this.formState) {
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成
if (Object.is($event.type, 'load')) {
this.getParams();
this.setFiles(this.value);
this.dataProcess();
}
});
}
}
/**
* vue 生命周期
*
* @returns
* @memberof AppFileUpload
*/
public mounted() {
this.appData = this.$store.getters.getAppData();
this.getParams();
this.setFiles(this.value);
this.dataProcess();
}
/**
*获取上传，导出参数
*
*@memberof AppFileUpload
*/
public getParams(){
let uploadparams: any = JSON.parse(JSON.stringify(this.uploadparams));
let exportparams: any = JSON.parse(JSON.stringify(this.exportparams));
let upload_params: Array<string> = [];
let export_params: Array<string> = [];
let param:any = this.viewparams;
let context:any = this.context;
let _data:any = JSON.parse(this.data);
if (this.uploadparams && !Object.is(this.uploadparams, '')) {
upload_params = this.$util.computedNavData(_data,param,context,uploadparams);
}
if (this.exportparams && !Object.is(this.exportparams, '')) {
export_params = this.$util.computedNavData(_data,param,context,exportparams);
}
this.upload_params = [];
this.export_params = [];
for (const item in upload_params) {
this.upload_params.push({
[item]:upload_params[item]
})
}
for (const item in export_params) {
this.export_params.push({
[item]:export_params[item]
})
}
}
/**
* 组件销毁
*
* @memberof AppFileUpload
*/
public destroyed(): void {
if (this.formStateEvent) {
this.formStateEvent.unsubscribe();
}
}
/**
* 上传之前
*
* @param {*} file
* @memberof AppFileUpload
*/
public beforeUpload(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;
}
if(this.imageOnly){
const imageTypes = ["image/jpeg" , "image/gif" , "image/png" , "image/bmp"];
const isImage = imageTypes.some((type: any)=> Object.is(type, file.type));
if (!isImage) {
this.$Notice.error({ title: (this.$t('components.appFileUpload.fileTypeErrorTitle') as any) ,desc: (this.$t('components.appFileUpload.fileTypeErrorInfo') as any)});
}
return isImage;
}
}
/**
* 上传成功回调
*
* @param {*} response
* @param {*} file
* @param {*} fileList
* @memberof AppFileUpload
*/
public onSuccess(response: any, file: any, fileList: any) {
if (!response) {
return;
}
const data = { name: response.filename, id: response.fileid };
let arr: Array<any> = [];
this.files.forEach((_file:any) => {
arr.push({name: _file.name, id: _file.id})
});
arr.push(data);
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', { name: this.name, 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)});
}
/**
* 删除文件
*
* @param {*} file
* @param {*} fileList
* @memberof AppFileUpload
*/
public onRemove(file: any, fileList: any) {
let arr: Array<any> = [];
fileList.forEach((f: any) => {
if (f.id != file.id) {
arr.push({ name: f.name, id: f.id });
}
});
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
if(arr.length == 0){
this.dialogVisible = false;
}
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
/**
* 下载文件
*
* @param {*} file
* @memberof AppFileUpload
*/
public onDownload(file: any) {
// 拼接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);
});
}
/**
* 是否只支持图片上传
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop({default: false}) public imageOnly!: boolean;
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop({default: false}) public rowPreview!: boolean;
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
public dialogVisible: boolean = false;
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
public showActions: boolean = false;
}
</script>
<style lang='less'>
@import './app-file-upload.less';
</style>
\ No newline at end of file
src/components/disk-file-upload/disk-file-upload.vue
浏览文件 @ d8e29d2d
......@@ -2,85 +2,60 @@
<div id="file-upload">
<el-row id="el-row">
<!--拖拽上传-->
<el-col v-if="showDrag==true" class="withDrag">
<el-upload
ref="upload"
drag
multiple
list-type="text"
:disabled="disabled"
:action="getAction()"
:headers="myHeaders"
:before-upload="beforeUpload"
:file-list="uploadFileList"
:show-file-list="false"
:http-request="customUploadFile">
<el-col v-if="showDrag == true" class="withDrag">
<el-upload v-if="!disabled" ref="upload" drag multiple list-type="text" :before-upload="beforeUploadLimit"
:disabled="disabled" :action="getAction()" :headers="myHeaders" :file-list="uploadFileList"
:show-file-list="false" :on-error="onError" :on-success="onSuccess">
<div>
<i class="el-icon-upload"></i>
<div>
<span>{{$t('components.diskFileUpload.fileDrag')}}</span>
<span style="color:#409EFF;">{{$t('components.diskFileUpload.clickUpload')}}</span>
<span>{{ $t('components.diskFileUpload.fileDrag') }}</span>
<span style="color:#409EFF;">{{ $t('components.diskFileUpload.clickUpload') }}</span>
</div>
</div>
</el-upload>
</el-col>
<!--点击上传-->
<el-col v-else class="withoutDrag">
<el-upload
ref="upload"
multiple
list-type="text"
:disabled="disabled"
: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-upload v-if="!disabled" ref="upload" multiple list-type="text" :before-upload="beforeUploadLimit"
:disabled="disabled" :action="getAction()" :headers="myHeaders" :file-list="uploadFileList"
:show-file-list="false" :on-error="onError" :on-success="onSuccess">
<el-button type="primary" size="small" icon="el-icon-upload">
{{ $t('components.diskFileUpload.clickUpload') }}
</el-button>
</el-upload>
</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">
<i class="el-icon-document"></i>
<span>{{item.name}}</span>
<span>{{ item.name }}</span>
</div>
<div class="fileMain">
<el-link type="success" icon="el-icon-download" @click="onDownload(item)">
{{$t('components.diskFileUpload.load')}}
<el-link type="success" v-show="showDownload" icon="el-icon-download" @click="onDownload(item)">
{{ $t('components.diskFileUpload.load') }}
</el-link>
<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 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)$/))"
@click="onEdit(item)">{{$t('components.diskFileUpload.edit')}}
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') }}
</el-link>
<el-link icon="el-icon-camera"
v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))"
@click="onOcr(item)">OCR
v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))"
@click="onOcr(item)">OCR
</el-link>
<el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)">
{{$t('components.diskFileUpload.delete')}}
<el-link type="danger" v-show="showDelete" icon="el-icon-delete" @click="onRemove(item, index)">
{{ $t('components.diskFileUpload.delete') }}
</el-link>
</div>
</el-col>
</el-row>
<!-- 自定义弹框 -->
<div class="dialogDiv">
<el-dialog
:title="dialogTitle"
center
width="70%"
top="5vh"
:visible="showDialog"
:close-on-click-modal="true"
:show-close="true"
:before-close="dialogClose"
:modal-append-to-body="false">
<el-dialog :title="dialogTitle" 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%;">
<iframe id="fileIframe" :src="iframeUrl" frameborder="0" width="100%"></iframe>
</div>
......@@ -90,647 +65,717 @@
</template>
<script lang="ts">
import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {Button, Row, Col, Link, Icon, Upload, Message, MessageBox} from 'element-ui';
import Axios from 'axios';
import {Subject, Unsubscribable} from 'rxjs';
@Component({})
export default class DiskFileUpload extends Vue {
/**
* 当前表单对象
*
* @type {*}
* @memberof DiskFileUpload
*/
@Prop() public data!: any;
/**
* 当前属性名
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public formItemName!: string;
/**
* 当前属性值
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public value!: string;
/**
* 当前表单状态
*
* @type {*}
* @memberof DiskFileUpload
*/
@Prop() public formState!: any;
/**
* 默认为当前实体名称，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public folder!: string;
/**
* 默认为当前实体主键id，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public ownerid!: string;
/**
* 默认为当前属性名，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public ownertype!: string;
/**
* 持久化
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public persistence?: boolean;
/**
* 是否启用
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public disabled?: boolean;
/**
* 是否显示拖拽区域
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public showDrag?: boolean;
/**
* 是否显示预览按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public showPreview?: boolean;
/**
* 是否显示在线编辑按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public showEdit?: boolean;
/**
* 是否显示OCR按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({default: false}) public showOcrview?: boolean;
/**
* 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
*
* @type {string}
* @memberof DiskFileUpload
*/
public srfuf: string = '0';
/**
* 文件列表
*
* @type {Array<any>}
* @memberof DiskFileUpload
*/
public uploadFileList: Array<any> = [];
/**
* 当前登陆人的token
*
* @type {string}
* @memberof DiskFileUpload
*/
public token: string = "Bearer " + localStorage.getItem('token');
/**
* 上传文件请求头
*
* @type {*}
* @memberof DiskFileUpload
*/
public myHeaders: any = {Authorization: this.token};
/**
* 表单状态事件
*
* @type {*}
* @memberof DiskFileUpload
*/
public formStateEvent: any | Unsubscribable | undefined;
/**
* 批量更新标识，false为不更新，true才可以更新
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isUpdateBatch: boolean = true;
/**
* 新建状态标识,true为新建，false为编辑
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isCreate: boolean = true;
/**
* 自定义弹框标题
*
* @type {*}
* @memberof DiskFileUpload
*/
public dialogTitle: any = '';
/**
* 是否显示自定义弹框
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public showDialog: boolean = false;
/**
* 嵌入自定义弹框中iframe的url
*
* @type {*}
* @memberof DiskFileUpload
*/
public iframeUrl: any = '';
/**
* 文件上传限制类型
*
* @type {*}
* @memberof DiskFileUpload
*/
limitType:Array<String> = ['application/x-msdownload','text/x-sh','text/html','text/javascript']
/**
* 关闭自定义弹框
*
* @memberof DiskFileUpload
*/
public dialogClose() {
this.dialogTitle = '';
this.showDialog = false;
this.iframeUrl = '';
let iframe: any = document.getElementById("fileIframe");
iframe.parentNode.removeChild("fileIframe");
}
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Message, MessageBox } from 'element-ui';
import Axios from 'axios';
import { Unsubscribable } from 'rxjs';
import { Environment } from '@/environments/environment';
import { encode } from "js-base64";
@Component({})
export default class DiskFileUpload extends Vue {
/**
* 当前表单对象
*
* @type {*}
* @memberof DiskFileUpload
*/
@Prop() public data!: any;
/**
* 当前属性名
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public formItemName!: string;
/**
* 当前属性值
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public value!: string;
/**
* 当前表单状态
*
* @type {*}
* @memberof DiskFileUpload
*/
@Prop() public formState!: any;
/**
* 默认为当前实体名称，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public folder!: string;
/**
* 默认为当前实体主键id，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public ownerid!: string;
/**
* 默认为当前属性名，有指定则按表单参数
*
* @type {string}
* @memberof DiskFileUpload
*/
@Prop() public ownertype!: string;
/**
* 持久化
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({ default: false }) public persistence?: boolean;
/**
* 是否启用
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({ default: false }) public disabled?: boolean;
/**
* 是否显示拖拽区域
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({ default: false }) public showDrag?: boolean;
/**
* 是否显示删除按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@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;
/**
* 是否显示在线编辑按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({ default: false }) public showEdit?: boolean;
/**
* 是否显示OCR按钮
*
* @type {boolean}
* @memberof DiskFileUpload
*/
@Prop({ default: false }) public showOcrview?: boolean;
/**
* 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
*
* @type {string}
* @memberof DiskFileUpload
*/
public srfuf: string = '0';
/**
* 文件列表
*
* @type {Array<any>}
* @memberof DiskFileUpload
*/
public uploadFileList: Array<any> = [];
/**
* 当前登陆人的token
*
* @type {string}
* @memberof DiskFileUpload
*/
public token: string = "Bearer " + localStorage.getItem('token');
/**
* 上传文件请求头
*
* @type {*}
* @memberof DiskFileUpload
*/
public myHeaders: any = { Authorization: this.token };
/**
* 表单状态事件
*
* @type {*}
* @memberof DiskFileUpload
*/
public formStateEvent: any | Unsubscribable | undefined;
/**
* 批量更新标识，false为不更新，true才可以更新
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isUpdateBatch: boolean = true;
/**
* 新建状态标识,true为新建，false为编辑
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isCreate: boolean = true;
/**
* 自定义弹框标题
*
* @type {*}
* @memberof DiskFileUpload
*/
public dialogTitle: any = '';
/**
* 是否显示自定义弹框
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public showDialog: boolean = false;
/**
* 嵌入自定义弹框中iframe的url
*
* @type {*}
* @memberof DiskFileUpload
*/
public iframeUrl: any = '';
/**
* 关闭自定义弹框
*
* @memberof DiskFileUpload
*/
public dialogClose() {
this.dialogTitle = '';
this.showDialog = false;
this.iframeUrl = '';
let iframe: any = document.getElementById("fileIframe");
iframe.parentNode.removeChild("fileIframe");
}
/**
* 拼接上传路径
*
* @memberof DiskFileUpload
*/
public getAction() {
return '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
}
/**
* 文件上传限制类型
*
* @type {*}
* @memberof DiskFileUpload
*/
limitType: Array<String> = ['application/x-msdownload', 'text/x-sh', 'text/html', 'text/javascript']
/**
* 拼接上传路径
*
* @memberof DiskFileUpload
*/
public getAction() {
return '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
}
/**
* return folder
*
* @memberof DiskFileUpload
*/
public getFolder() {
return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
}
/**
* return folder
*
* @memberof DiskFileUpload
*/
public getFolder() {
return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
}
/**
* return ownertype
*
* @memberof DiskFileUpload
*/
public getOwnertype() {
return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
}
/**
* return ownertype
*
* @memberof DiskFileUpload
*/
public getOwnertype() {
return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
}
/**
* return ownerid
*
* @memberof DiskFileUpload
*/
public getOwnerid() {
return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
}
/**
* return ownerid
*
* @memberof DiskFileUpload
*/
public getOwnerid() {
return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
}
/**
* vue创建
*
* @memberof DiskFileUpload
*/
public created() {
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成
if (Object.is($event.type, 'load')) {
const data = JSON.parse(JSON.stringify($event.data));
// 编辑表单，保存时不进行批量更新
if (data.srfuf == '1') {
this.isCreate = false;
this.isUpdateBatch = false;
}
// 当persistence = true时
if (this.persistence == true) {
// 直接从表单的data数据里获取当前属性的值
if (data[this.formItemName] && this.uploadFileList.length == 0) {
const files = JSON.parse(data[this.formItemName]);
for (let i = 0; i < files.length; i++) {
this.uploadFileList.push(files[i]);
}
/**
* vue创建
*
* @memberof DiskFileUpload
*/
public created() {
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成
if (Object.is($event.type, 'load')) {
const data = JSON.parse(JSON.stringify($event.data));
// 编辑表单，保存时不进行批量更新
if (data.srfuf == '1') {
this.isCreate = false;
this.isUpdateBatch = false;
}
// 当persistence = true时
if (this.persistence == true) {
// 直接从表单的data数据里获取当前属性的值
if (data[this.formItemName] && this.uploadFileList.length == 0) {
const files = JSON.parse(data[this.formItemName]);
for (let i = 0; i < files.length; i++) {
this.uploadFileList.push(files[i]);
}
} else {
// 发送get请求获取文件列表
this.getFiles();
}
} else {
// 发送get请求获取文件列表
this.getFiles();
}
// 表单保存完成
if (Object.is($event.type, 'save')) {
// 批量更新文件表中的ownerid
if (this.isUpdateBatch == true && this.uploadFileList.length > 0) {
this.updateFileBatch(this.uploadFileList);
}
}
// 表单保存完成
if (Object.is($event.type, 'save')) {
// 批量更新文件表中的ownerid
if (this.isUpdateBatch == true && this.uploadFileList.length > 0) {
this.updateFileBatch(this.uploadFileList);
}
});
}
}
});
}
/**
* 获取文件列表
*
* @memberof DiskFileUpload
*/
public getFiles() {
// 拼接url
let _this: any = this;
const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求
Axios.get(getUrl, {
params: {
ownertype: this.getOwnertype(),
ownerid: this.getOwnerid(),
},
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.getFileFailure') + '!');
return;
}
// 返回的是一个jsonArray
if (response.data) {
const files = JSON.parse(JSON.stringify(response.data));
if (this.uploadFileList.length == 0) {
this.uploadFileList.push.apply(this.uploadFileList, files);
}
/**
* 获取文件列表
*
* @memberof DiskFileUpload
*/
public getFiles() {
// 拼接url
let _this: any = this;
const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求
Axios.get(getUrl, {
params: {
ownertype: this.getOwnertype(),
ownerid: this.getOwnerid(),
},
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.getFileFailure') + '!');
return;
}
// 返回的是一个jsonArray
if (response.data) {
const files = JSON.parse(JSON.stringify(response.data));
if (this.uploadFileList.length == 0) {
this.uploadFileList.push.apply(this.uploadFileList, files);
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.getFileFailure') + ':' + error);
});
}
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.getFileFailure') + ':' + error);
});
}
/**
* 自定义上传文件
*
* @param 上传文件
* @memberof DiskFileUpload
*/
public customUploadFile(param: any) {
// 上传的文件
let _this: any = this;
let file = param.file;
// formData传参
let formData = new FormData();
formData.append('file', file);
// 拼接url
const uploadUrl = this.getAction();
// 发送post请求
Axios.post(uploadUrl, formData).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + '!');
}
// 返回的是一个jsonobject
if (response.data) {
// 新建表单上传，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
// 保存到文件列表进行显示
this.uploadFileList.push(response.data);
// persistence=true时需要持久化表单属性
if (this.persistence == true && this.uploadFileList.length > 0) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + ':' + error);
})
/**
* 上传成功回调
*
* @param {*} response
* @param {*} file
* @param {*} fileList
* @memberof AppFileUpload
*/
public onSuccess(response: any, file: any, fileList: any) {
if (!response) {
return;
}
/**
* 上传之前
*
* @param file
* @memberof DiskFileUpload
*/
public beforeUpload(file:any){
if(this.limitType.includes(file.type)){
Message.error('不可上传 html、js、 exe、sh类型的文件！')
return false
}
return true
// 返回的是一个jsonobject
// 新建表单上传，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
/**
* 下载文件
*
* @param item 下载文件
* @memberof DiskFileUpload
*/
public onDownload(item: any) {
// 拼接url
let _this: any = this;
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 downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': item.authcode,
},
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];
// 用blob对象获取文件流
let blob = new Blob([response.data], {type: response.headers['content-type']});
// 通过文件流创建下载链接
var href = URL.createObjectURL(blob);
// 创建一个a元素并设置相关属性
let a = document.createElement('a');
a.href = href;
if (name) {
a.download = name;
} else {
a.download = filename;
}
// 添加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);
});
// 保存到文件列表进行显示
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 item 预览文件
* @memberof DiskFileUpload
*/
public onPreview(item: any) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
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) => {
if (!response || response.status != 200) {
return;
}
// 返回一个url，通过自定义弹框打开
if (response.data) {
this.dialogTitle = name;
this.showDialog = true;
this.iframeUrl = response.data;
}
}).catch((error: any) => {
Message.error(error);
});
/**
* 上传失败回调
*
* @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 item
* @memberof DiskFileUpload
*/
public onEdit(item: any) {
// 拼接url
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 editUrl = '/net-disk/editview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// TODO:暂时用window.open
window.open(editUrl);
/**
* 上传之前
*
* @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;
}
/**
* ocr识别
* @param item
* @memberof DiskFileUpload
*/
public onOcr(item: any) {
// 拼接url
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
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 ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
Axios.get(ocrUrl).then((response: any) => {
if (!response || response.status != 200) {
return;
/**
* 自定义上传文件
*
* @param 上传文件
* @memberof DiskFileUpload
*/
public customUploadFile(param: any) {
// 上传的文件
let _this: any = this;
let file = param.file;
// formData传参
let formData = new FormData();
formData.append('file', file);
// 拼接url
const uploadUrl = this.getAction();
// 发送post请求
Axios.post(uploadUrl, formData, { timeout: 6000 }).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + '!');
}
// 返回的是一个jsonobject
if (response.data) {
// 新建表单上传，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
// 返回一个url，通过自定义弹框打开
if (response.data) {
this.dialogTitle = name;
this.showDialog = true;
this.iframeUrl = response.data;
// 保存到文件列表进行显示
this.uploadFileList.push(response.data);
// persistence=true时需要持久化表单属性
if (this.persistence == true && this.uploadFileList.length > 0) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', { name: this.formItemName, value: value });
}
}).catch((error: any) => {
Message.error(error);
});
}
/**
* 删除文件
*
* @param item
* @param index
* @memberof DiskFileUpload
*/
public onRemove(item: any, index: number) {
let _this: any = this;
if (item) {
MessageBox.confirm(_this.$t('components.diskFileUpload.deleteFile'), _this.$t('components.diskFileUpload.deleteFilePrompt'), {
confirmButtonText: _this.$t('components.diskFileUpload.true'),
cancelButtonText: _this.$t('components.diskFileUpload.false'),
type: 'warning'
}).then(() => {
//　拼接url
const deleteUrl = '/net-disk/files/' + item.id;
// 发送delete请求
Axios.delete(deleteUrl).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + '!');
}
// 从文件列表中删除
this.uploadFileList.splice(index, 1);
// persistence=true时需要持久化表单属性
if (this.persistence == true) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}).catch((error: any) => {
// 提示删除失败
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + ':' + error);
});
});
}
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + ':' + error);
})
}
/**
* 批量更新文件表的ownerid
*
* @memberof DiskFileUpload
*/
public updateFileBatch(files: any) {
let _this: any = this;
// 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
// requestBody参数
let requestBody = [];
if (files) {
requestBody = files;
/**
* 下载文件
*
* @param item 下载文件
* @memberof DiskFileUpload
*/
public onDownload(item: any) {
// 拼接url
let _this: any = this;
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 downloadUrl = '/ibizutilrpm/download/' + this.getFolder() + '/' + id + '/' + name;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': item.authcode,
},
responseType: 'arraybuffer',
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.downloadFile') + '!');
return;
}
// 发送post请求
Axios.post(updateUrl, requestBody, {
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + '!');
// 请求成功，后台返回的是一个文件流
if (response.data) {
// 获取文件名
const disposition = response.headers['content-disposition'];
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对象获取文件流
let blob = new Blob([response.data], { type: response.headers['content-type'] });
// 兼容ie语法
if ('msSaveOrOpenBlob' in navigator) {
window.navigator.msSaveOrOpenBlob(blob, actualFileName);
return;
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + ':' + error);
});
}
}
</script>
<style lang="less">
#file-upload {
width: auto;
height: auto;
border: 0px solid black;
// 通过文件流创建下载链接
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);
});
}
#el-row {
border: 0px solid red;
width: 400px;
/**
* 预览文件
*
* @param item 预览文件
* @memberof DiskFileUpload
*/
public onPreview(item: any) {
// 拼接url
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 downloadUrl = (window as any).Environment.ExportFile + '/' + id + '/' + name;
const previewFileUrl = Environment.previewFileUrl;
if (previewFileUrl) {
const url = encodeURIComponent(encode(`${window.location.origin}${downloadUrl}?fullfilename=${name}`));
this.dialogTitle = name;
this.showDialog = true;
this.iframeUrl = `${previewFileUrl}/onlinePreview?url=${url}`;
}
}
.withDrag {
border: 0px solid grey;
width: 400px;
/**
* 编辑文件
*
* @param item
* @memberof DiskFileUpload
*/
public onEdit(item: any) {
// 拼接url
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 editUrl = '/net-disk/editview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// TODO:暂时用window.open
window.open(editUrl);
}
.withoutDrag {
border: 0px solid grey;
width: 400px;
text-align: left;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
/**
* ocr识别
* @param item
* @memberof DiskFileUpload
*/
public onOcr(item: any) {
// 拼接url
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
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 ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
Axios.get(ocrUrl).then((response: any) => {
if (!response || response.status != 200) {
return;
}
// 返回一个url，通过自定义弹框打开
if (response.data) {
this.dialogTitle = name;
this.showDialog = true;
this.iframeUrl = response.data;
}
}).catch((error: any) => {
Message.error(error);
});
}
.fileList {
width: 400px;
border: 0px solid grey;
margin-top: 0px;
/**
* 删除文件
*
* @param item
* @param index
* @memberof DiskFileUpload
*/
public onRemove(item: any, index: number) {
let _this: any = this;
if (item) {
MessageBox.confirm(_this.$t('components.diskFileUpload.deleteFile'), _this.$t('components.diskFileUpload.deleteFilePrompt'), {
confirmButtonText: _this.$t('components.diskFileUpload.true'),
cancelButtonText: _this.$t('components.diskFileUpload.false'),
type: 'warning'
}).then(() => {
//　拼接url
const deleteUrl = '/net-disk/files/' + item.id;
// 发送delete请求
Axios.delete(deleteUrl).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + '!');
}
// 从文件列表中删除
this.uploadFileList.splice(index, 1);
// persistence=true时需要持久化表单属性
if (this.persistence == true) {
const value = this.uploadFileList.length == 0 ? null : JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', { name: this.formItemName, value: value });
}
}).catch((error: any) => {
// 提示删除失败
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + ':' + error);
});
});
}
}
.fileTitle {
text-align: left;
margin-left: 0px;
/**
* 批量更新文件表的ownerid
*
* @memberof DiskFileUpload
*/
public updateFileBatch(files: any) {
let _this: any = this;
// 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
// requestBody参数
let requestBody = [];
if (files) {
requestBody = files;
}
// 发送post请求
Axios.post(updateUrl, requestBody, {
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + '!');
return;
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + ':' + error);
});
}
.fileTitle i {
margin-right: 5px;
}
</script>
<style lang="less">
#file-upload {
width: auto;
height: auto;
border: 0px solid black;
}
#el-row {
border: 0px solid red;
width: 400px;
}
.withDrag {
border: 0px solid grey;
width: 400px;
}
.withoutDrag {
border: 0px solid grey;
width: 400px;
text-align: left;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
}
.fileList {
width: 400px;
border: 0px solid grey;
margin-top: 0px;
}
.fileTitle {
text-align: left;
margin-left: 0px;
}
.fileTitle i {
margin-right: 5px;
}
.fileMain {
text-align: left;
margin-left: 0px;
margin-top: -10px;
}
.fileMain .el-link:nth-child(n+2) {
margin-left: 10px;
}
.dialogDiv {
// el-dialog头部
.el-dialog__header {
height: 40px;
}
.fileMain {
text-align: left;
margin-left: 0px;
margin-top: -10px;
// el-dialog面板
.el-dialog__wrapper {
height: 90vh;
overflow: visible;
}
.fileMain .el-link:nth-child(n+2) {
margin-left: 10px;
// el-dialog
.el-dialog {
height: 100%;
}
.dialogDiv {
// el-dialog头部
.el-dialog__header {
height: 40px;
}
// el-dialog面板
.el-dialog__wrapper {
height: 90vh;
overflow: visible;
}
// el-dialog
.el-dialog {
height: 100%;
}
// el-dailog内容
.el-dialog__body {
height: inherit;
}
#fileIframe {
height: calc(100% - 40px);
}
// el-dailog内容
.el-dialog__body {
height: inherit;
}
#fileIframe {
height: calc(100% - 40px);
}
}
</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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或