Skip to content

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

修改disk表单文件上传控件预览ocr接口处理

上级 30bf7934
隐藏空白字符变更
内嵌 并排
正在显示 包含 140 行增加 和 61 行删除
src/components/disk-file-upload/disk-file-upload.vue
浏览文件 @ 3e1a5719
...@@ -68,6 +68,8 @@ ...@@ -68,6 +68,8 @@
<!-- 自定义弹框 --> <!-- 自定义弹框 -->
<div class="dialogDiv"> <div class="dialogDiv">
<el-dialog <el-dialog
:title="dialogTitle"
center
width="70%" width="70%"
top="5vh" top="5vh"
:visible="showDialog" :visible="showDialog"
...@@ -245,23 +247,40 @@ ...@@ -245,23 +247,40 @@
*/ */
public isCreate: boolean = true; public isCreate: boolean = true;
/**
* 自定义弹框标题
*
* @type {*}
* @memberof DiskFileUpload
*/
public dialogTitle: any = '';
/** /**
* 是否显示自定义弹框 * 是否显示自定义弹框
*
* @type {boolean}
* @memberof DiskFileUpload
*/ */
public showDialog = false; public showDialog: boolean = false;
/** /**
* 嵌入自定义弹框中iframe的url * 嵌入自定义弹框中iframe的url
*
* @type {*}
* @memberof DiskFileUpload
*/ */
public iframeUrl: any = ''; public iframeUrl: any = '';
/** /**
* 关闭自定义弹框 * 关闭自定义弹框
*
* @memberof DiskFileUpload
*/ */
public dialogClose() { public dialogClose() {
this.dialogTitle = '';
this.showDialog = false; this.showDialog = false;
this.iframeUrl = ''; this.iframeUrl = '';
let iframe:any = document.getElementById("fileIframe"); let iframe: any = document.getElementById("fileIframe");
iframe.parentNode.removeChild("fileIframe"); iframe.parentNode.removeChild("fileIframe");
} }
...@@ -302,7 +321,7 @@ ...@@ -302,7 +321,7 @@
} }
/** /**
* * vue创建
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
...@@ -334,7 +353,7 @@ ...@@ -334,7 +353,7 @@
if (Object.is($event.type, 'save')) { if (Object.is($event.type, 'save')) {
// 批量更新文件表中的ownerid // 批量更新文件表中的ownerid
if (this.isUpdateBatch == true && this.uploadFileList.length > 0) { if (this.isUpdateBatch == true && this.uploadFileList.length > 0) {
this.updateFileBatch(this.uploadFileList, 'update'); this.updateFileBatch(this.uploadFileList);
} }
} }
}); });
...@@ -355,7 +374,7 @@ ...@@ -355,7 +374,7 @@
ownertype: this.getOwnertype(), ownertype: this.getOwnertype(),
ownerid: this.getOwnerid(), ownerid: this.getOwnerid(),
}, },
}).then(response => { }).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.getFileFailure') + '!'); Message.error(_this.$t('components.diskFileUpload.getFileFailure') + '!');
return; return;
...@@ -367,7 +386,7 @@ ...@@ -367,7 +386,7 @@
this.uploadFileList.push.apply(this.uploadFileList, files); this.uploadFileList.push.apply(this.uploadFileList, files);
} }
} }
}).catch(error => { }).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.getFileFailure') + ':' + error); Message.error(_this.$t('components.diskFileUpload.getFileFailure') + ':' + error);
}); });
} }
...@@ -388,7 +407,7 @@ ...@@ -388,7 +407,7 @@
// 拼接url // 拼接url
const uploadUrl = this.getAction(); const uploadUrl = this.getAction();
// 发送post请求 // 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => { Axios.post(uploadUrl, formData, {timeout: 2000}).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') + '!');
} }
...@@ -406,8 +425,8 @@ ...@@ -406,8 +425,8 @@
this.$emit('formitemvaluechange', {name: this.formItemName, value: value}); this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
} }
} }
}).catch(err => { }).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + ':' + err); Message.error(_this.$t('components.diskFileUpload.loadFailure') + ':' + error);
}) })
} }
...@@ -426,10 +445,10 @@ ...@@ -426,10 +445,10 @@
// 发送get请求 // 发送get请求
Axios.get(downloadUrl, { Axios.get(downloadUrl, {
headers: { headers: {
'authcode': item.authcode 'authcode': item.authcode,
}, },
responseType: 'arraybuffer', responseType: 'arraybuffer',
}).then(response => { }).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.downloadFile') + '!'); Message.error(_this.$t('components.diskFileUpload.downloadFile') + '!');
return; return;
...@@ -440,13 +459,17 @@ ...@@ -440,13 +459,17 @@
const disposition = response.headers['content-disposition']; const disposition = response.headers['content-disposition'];
const filename = disposition.split('filename=')[1]; const filename = disposition.split('filename=')[1];
// 用blob对象获取文件流 // 用blob对象获取文件流
var blob = new Blob([response.data], {type: response.headers['content-type']}); let blob = new Blob([response.data], {type: response.headers['content-type']});
// 创建下载链接 // 通过文件流创建下载链接
var href = URL.createObjectURL(blob); var href = URL.createObjectURL(blob);
// 创建一个a元素并设置相关属性 // 创建一个a元素并设置相关属性
var a = document.createElement('a'); let a = document.createElement('a');
a.href = href; a.href = href;
a.download = filename; if (name) {
a.download = name;
} else {
a.download = filename;
}
// 添加a元素到当前网页 // 添加a元素到当前网页
document.body.appendChild(a); document.body.appendChild(a);
// 触发a元素的点击事件，实现下载 // 触发a元素的点击事件，实现下载
...@@ -458,7 +481,7 @@ ...@@ -458,7 +481,7 @@
} else { } else {
Message.error(_this.$t('components.diskFileUpload.downloadFile1')); Message.error(_this.$t('components.diskFileUpload.downloadFile1'));
} }
}).catch(error => { }).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.downloadFile') + ':' + error); Message.error(_this.$t('components.diskFileUpload.downloadFile') + ':' + error);
}); });
} }
...@@ -473,10 +496,20 @@ ...@@ -473,10 +496,20 @@
// 拼接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);
const previewUrl = '/net-disk/preview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode; let previewUrl = '/net-disk/preview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 自定义弹框打开url Axios.get(previewUrl).then((response: any) => {
this.showDialog = true; if (!response || response.status != 200) {
this.iframeUrl = previewUrl; return;
}
// 返回一个url，通过自定义弹框打开
if (response.data) {
this.dialogTitle = name;
this.showDialog = true;
this.iframeUrl = response.data;
}
}).catch((error: any) => {
Message.error(error);
});
} }
/** /**
...@@ -505,9 +538,19 @@ ...@@ -505,9 +538,19 @@
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);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode; const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 自定义弹框打开url Axios.get(ocrUrl).then((response: any) => {
this.showDialog = true; if (!response || response.status != 200) {
this.iframeUrl = ocrUrl; return;
}
// 返回一个url，通过自定义弹框打开
if (response.data) {
this.dialogTitle = name;
this.showDialog = true;
this.iframeUrl = response.data;
}
}).catch((error: any) => {
Message.error(error);
});
} }
/** /**
...@@ -528,7 +571,7 @@ ...@@ -528,7 +571,7 @@
//　拼接url //　拼接url
const deleteUrl = '/net-disk/files/' + item.id; const deleteUrl = '/net-disk/files/' + item.id;
// 发送delete请求 // 发送delete请求
Axios.delete(deleteUrl).then(response => { Axios.delete(deleteUrl).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + '!'); Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + '!');
} }
...@@ -539,7 +582,7 @@ ...@@ -539,7 +582,7 @@
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 => { }).catch((error: any) => {
// 提示删除失败 // 提示删除失败
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + ':' + error); Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + ':' + error);
}); });
...@@ -552,7 +595,7 @@ ...@@ -552,7 +595,7 @@
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public updateFileBatch(files: any, opt: any) { public updateFileBatch(files: any) {
let _this: any = this; let _this: any = this;
// 拼接url // 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid(); const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
...@@ -567,12 +610,12 @@ ...@@ -567,12 +610,12 @@
"Content-Type": "application/json;charset=UTF-8" "Content-Type": "application/json;charset=UTF-8"
}, },
timeout: 2000 timeout: 2000
}).then(response => { }).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + '!'); Message.error(_this.$t('components.diskFileUpload.updateFailure') + '!');
return; return;
} }
}).catch(error => { }).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + ':' + error); Message.error(_this.$t('components.diskFileUpload.updateFailure') + ':' + error);
}); });
} }
...@@ -629,11 +672,12 @@ ...@@ -629,11 +672,12 @@
margin-left: 10px; margin-left: 10px;
} }
.dialogDiv{ .dialogDiv {
// el-dialog头部 // el-dialog头部
.el-dialog__header{ .el-dialog__header {
height:40px; height: 40px;
} }
// el-dialog面板 // el-dialog面板
.el-dialog__wrapper { .el-dialog__wrapper {
height: 90vh; height: 90vh;
...@@ -649,7 +693,8 @@ ...@@ -649,7 +693,8 @@
.el-dialog__body { .el-dialog__body {
height: inherit; height: inherit;
} }
#fileIframe{
#fileIframe {
height: calc(100% - 40px); height: calc(100% - 40px);
} }
} }
......
src/components/disk-image-upload/disk-image-upload.vue
浏览文件 @ 3e1a5719
...@@ -45,6 +45,8 @@ ...@@ -45,6 +45,8 @@
<!-- 自定义弹框 --> <!-- 自定义弹框 -->
<div class="dialogDiv"> <div class="dialogDiv">
<el-dialog <el-dialog
:title="dialogTitle"
center
width="70%" width="70%"
top="5vh" top="5vh"
:visible="showDialog" :visible="showDialog"
...@@ -231,23 +233,40 @@ ...@@ -231,23 +233,40 @@
*/ */
public imageFileids: Array<any> = []; public imageFileids: Array<any> = [];
/**
* 自定义弹框标题
*
* @type {*}
* @memberof DiskImageUplaod
*/
public dialogTitle: any = '';
/** /**
* 是否显示自定义弹框 * 是否显示自定义弹框
*
* @type {boolean}
* @memberof DiskImageUplaod
*/ */
public showDialog = false; public showDialog: boolean = false;
/** /**
* 嵌入自定义弹框中iframe的url * 嵌入自定义弹框中iframe的url
*
* @type {*}
* @memberof DiskImageUplaod
*/ */
public iframeUrl: any = ''; public iframeUrl: any = '';
/** /**
* 关闭自定义弹框 * 关闭自定义弹框
*
* @memberof DiskImageUplaod
*/ */
public dialogClose() { public dialogClose() {
this.dialogTitle = '';
this.showDialog = false; this.showDialog = false;
this.iframeUrl = ''; this.iframeUrl = '';
let iframe:any = document.getElementById("fileIframe"); let iframe: any = document.getElementById("fileIframe");
iframe.parentNode.removeChild("fileIframe"); iframe.parentNode.removeChild("fileIframe");
} }
...@@ -288,7 +307,7 @@ ...@@ -288,7 +307,7 @@
} }
/** /**
* vue生命周期create * vue创建
* *
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
...@@ -344,7 +363,7 @@ ...@@ -344,7 +363,7 @@
ownertype: this.getOwnertype(), ownertype: this.getOwnertype(),
ownerid: this.getOwnerid(), ownerid: this.getOwnerid(),
}, },
}).then(response => { }).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.getImageFailure') + "!"); Message.error(_this.$t('components.diskImageUpload.getImageFailure') + "!");
return; return;
...@@ -361,7 +380,7 @@ ...@@ -361,7 +380,7 @@
}); });
} }
} }
}).catch(error => { }).catch((error: any) => {
Message.error(_this.$t('components.diskImageUpload.getImageFailure') + ':' + error); Message.error(_this.$t('components.diskImageUpload.getImageFailure') + ':' + error);
}); });
} }
...@@ -382,14 +401,14 @@ ...@@ -382,14 +401,14 @@
'authcode': fileData.authcode 'authcode': fileData.authcode
}, },
responseType: 'blob', responseType: 'blob',
}).then(res => { }).then((response: any) => {
if (!res || res.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + '!'); Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + '!');
} }
// 请求成功，后台返回的是一个文件流 // 请求成功，后台返回的是一个文件流
if (res.data) { if (response.data) {
// 用blob对象获取文件流 // 用blob对象获取文件流
var blob = new Blob([res.data], {type: res.headers['content-type']}); var blob = new Blob([response.data], {type: response.headers['content-type']});
// 通过文件流创建下载链接 // 通过文件流创建下载链接
var href = URL.createObjectURL(blob); var href = URL.createObjectURL(blob);
// 将下载链接保存到图片中 // 将下载链接保存到图片中
...@@ -408,7 +427,7 @@ ...@@ -408,7 +427,7 @@
} else { } else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure1')); Message.error(_this.$t('components.diskImageUpload.loadImageFailure1'));
} }
}).catch(error => { }).catch((error: any) => {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + ':' + error); Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + ':' + error);
}); });
} }
...@@ -442,7 +461,7 @@ ...@@ -442,7 +461,7 @@
// 拼接url // 拼接url
const uploadUrl = this.getAction(); const uploadUrl = this.getAction();
// 发送post请求 // 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => { Axios.post(uploadUrl, formData, {timeout: 2000}).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.uploadImageFailure') + "!"); Message.error(_this.$t('components.diskImageUpload.uploadImageFailure') + "!");
} }
...@@ -457,15 +476,15 @@ ...@@ -457,15 +476,15 @@
'authcode': returnData.authcode 'authcode': returnData.authcode
}, },
responseType: 'blob', responseType: 'blob',
}).then(res => { }).then((response2) => {
if (!res || res.status != 200) { if (!response2 || response2.status != 200) {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + "!"); Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + "!");
return; return;
} }
// 请求成功，后台返回的是一个文件流 // 请求成功，后台返回的是一个文件流
if (res.data) { if (response2.data) {
// 用blob对象获取文件流 // 用blob对象获取文件流
var blob = new Blob([res.data], {type: res.headers['content-type']}); var blob = new Blob([response2.data], {type: response2.headers['content-type']});
// 通过文件流创建下载链接 // 通过文件流创建下载链接
var href = URL.createObjectURL(blob); var href = URL.createObjectURL(blob);
// 将下载链接保存到本次上传成功后返回的jsonobject中 // 将下载链接保存到本次上传成功后返回的jsonobject中
...@@ -493,12 +512,12 @@ ...@@ -493,12 +512,12 @@
} else { } else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure1')); Message.error(_this.$t('components.diskImageUpload.loadImageFailure1'));
} }
}).catch(error => { }).catch((error2: any) => {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + ':' + error); Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + ':' + error2);
}); });
} }
}).catch(err => { }).catch((error: any) => {
Message.error(_this.$t('components.diskImageUpload.uploadImageFailure') + ':' + err); Message.error(_this.$t('components.diskImageUpload.uploadImageFailure') + ':' + error);
}); });
} }
...@@ -528,9 +547,19 @@ ...@@ -528,9 +547,19 @@
const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id); const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
const name = typeof file.name == "string" ? file.name : JSON.stringify(file.name); const name = typeof file.name == "string" ? file.name : JSON.stringify(file.name);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + file.authcode; const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + file.authcode;
// 自定义弹框打开url Axios.get(ocrUrl).then((response: any) => {
this.showDialog = true; if (!response || response.status != 200) {
this.iframeUrl = ocrUrl; return;
}
// 返回一个url，通过自定义弹框打开
if (response.data) {
this.dialogTitle = name;
this.showDialog = true;
this.iframeUrl = response.data;
}
}).catch((error: any) => {
Message.error(error);
});
} }
/** /**
...@@ -550,7 +579,7 @@ ...@@ -550,7 +579,7 @@
'authcode': file.authcode 'authcode': file.authcode
}, },
responseType: 'blob', responseType: 'blob',
}).then(response => { }).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure2') + '!'); Message.error(_this.$t('components.diskImageUpload.loadImageFailure2') + '!');
return; return;
...@@ -567,7 +596,11 @@ ...@@ -567,7 +596,11 @@
// 创建一个a元素并设置相关属性 // 创建一个a元素并设置相关属性
var a = document.createElement('a'); var a = document.createElement('a');
a.href = href; a.href = href;
a.download = filename; if (name) {
a.download = name;
} else {
a.download = filename;
}
// 添加a元素到当前网页 // 添加a元素到当前网页
document.body.appendChild(a); document.body.appendChild(a);
// 触发a元素的点击事件，实现下载 // 触发a元素的点击事件，实现下载
...@@ -579,7 +612,7 @@ ...@@ -579,7 +612,7 @@
} else { } else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure3')); Message.error(_this.$t('components.diskImageUpload.loadImageFailure3'));
} }
}).catch(error => { }).catch((error: any) => {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure2') + ':' + error); Message.error(_this.$t('components.diskImageUpload.loadImageFailure2') + ':' + error);
}); });
} }
...@@ -604,7 +637,7 @@ ...@@ -604,7 +637,7 @@
//　拼接url //　拼接url
const deleteUrl = '/net-disk/files/' + file.id; const deleteUrl = '/net-disk/files/' + file.id;
// 发送delete请求 // 发送delete请求
Axios.delete(deleteUrl).then(response => { Axios.delete(deleteUrl).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.deleteImageFailure') + '!'); Message.error(_this.$t('components.diskImageUpload.deleteImageFailure') + '!');
} }
...@@ -617,7 +650,7 @@ ...@@ -617,7 +650,7 @@
const value = JSON.stringify(this.imageList); const value = JSON.stringify(this.imageList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value}); this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
} }
}).catch(error => { }).catch((error: any) => {
// 提示删除失败 // 提示删除失败
Message.error(_this.$t('components.diskImageUpload.deleteImageFailure') + ':' + error); Message.error(_this.$t('components.diskImageUpload.deleteImageFailure') + ':' + error);
}); });
...@@ -647,12 +680,12 @@ ...@@ -647,12 +680,12 @@
"Content-Type": "application/json;charset=UTF-8" "Content-Type": "application/json;charset=UTF-8"
}, },
timeout: 2000 timeout: 2000
}).then(response => { }).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.updateFailure') + '!'); Message.error(_this.$t('components.diskImageUpload.updateFailure') + '!');
return; return;
} }
}).catch(error => { }).catch((error: any) => {
Message.error(_this.$t('components.diskImageUpload.updateFailure') + ':' + error); Message.error(_this.$t('components.diskImageUpload.updateFailure') + ':' + error);
}); });
} }
...@@ -684,6 +717,7 @@ ...@@ -684,6 +717,7 @@
height: inherit; height: inherit;
} }
// iframe
#fileIframe { #fileIframe {
height: calc(100% - 40px); height: calc(100% - 40px);
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或