Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
I
ibzlite
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
ibiz4jteam
ibzlite
提交
0fb6ad5d
提交
0fb6ad5d
编写于
9月 22, 2020
作者:
lzlhxj
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改文件处理接口方式
上级
0742f15f
变更
2
隐藏空白字符变更
内嵌
并排
正在显示
2 个修改的文件
包含
1157 行增加
和
1025 行删除
+1157
-1025
disk-file-upload.vue
app_web/src/components/disk-file-upload/disk-file-upload.vue
+548
-482
disk-image-upload.vue
...eb/src/components/disk-image-upload/disk-image-upload.vue
+609
-543
未找到文件。
app_web/src/components/disk-file-upload/disk-file-upload.vue
浏览文件 @
0fb6ad5d
...
@@ -33,7 +33,9 @@
...
@@ -33,7 +33,9 @@
:file-list=
"uploadFileList"
:file-list=
"uploadFileList"
:show-file-list=
"false"
:show-file-list=
"false"
:http-request=
"customUploadFile"
>
:http-request=
"customUploadFile"
>
<el-button
type=
"primary"
size=
"small"
icon=
"el-icon-upload"
>
{{
$t
(
'components.diskFileUpload.clickUpload'
)
}}
</el-button>
<el-button
type=
"primary"
size=
"small"
icon=
"el-icon-upload"
>
{{
$t
(
'components.diskFileUpload.clickUpload'
)
}}
</el-button>
</el-upload>
</el-upload>
</el-col>
</el-col>
<!--文件操作-->
<!--文件操作-->
...
@@ -43,8 +45,11 @@
...
@@ -43,8 +45,11 @@
<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)"
>
{{
$t
(
'components.diskFileUpload.load'
)
}}
</el-link>
<el-link
type=
"success"
icon=
"el-icon-download"
@
click=
"onDownload(item)"
>
<el-link
type=
"warning"
icon=
"el-icon-view"
v-show=
"showPreview"
@
click=
"onPreview(item)"
>
{{
$t
(
'components.diskFileUpload.preview'
)
}}
{{
$t
(
'components.diskFileUpload.load'
)
}}
</el-link>
<el-link
type=
"warning"
icon=
"el-icon-view"
v-show=
"showPreview"
@
click=
"onPreview(item)"
>
{{
$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)$/))"
...
@@ -54,262 +59,295 @@
...
@@ -54,262 +59,295 @@
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)"
>
{{
$t
(
'components.diskFileUpload.delete'
)
}}
</el-link>
<el-link
type=
"danger"
icon=
"el-icon-delete"
@
click=
"onRemove(item,index)"
>
{{
$t
(
'components.diskFileUpload.delete'
)
}}
</el-link>
</div>
</div>
</el-col>
</el-col>
</el-row>
</el-row>
<!-- 自定义弹框 -->
<div
class=
"dialogDiv"
>
<el-dialog
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>
</el-dialog>
</div>
</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
{
Button
,
Row
,
Col
,
Link
,
Icon
,
Upload
,
Message
,
MessageBox
}
from
'element-ui'
;
import
{
Button
,
Row
,
Col
,
Link
,
Icon
,
Upload
,
Message
,
MessageBox
}
from
'element-ui'
;
import
Axios
from
'axios'
;
import
Axios
from
'axios'
;
import
{
Subject
,
Unsubscribable
}
from
'rxjs'
;
import
{
Subject
,
Unsubscribable
}
from
'rxjs'
;
@
Component
({})
@
Component
({})
export
default
class
DiskFileUpload
extends
Vue
{
export
default
class
DiskFileUpload
extends
Vue
{
/**
/**
* 当前表单对象
* 当前表单对象
*
*
* @type {*}
* @type {*}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
()
public
data
!
:
any
;
@
Prop
()
public
data
!
:
any
;
/**
/**
* 当前属性名
* 当前属性名
*
*
* @type {string}
* @type {string}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
()
public
formItemName
!
:
string
;
@
Prop
()
public
formItemName
!
:
string
;
/**
/**
* 当前属性值
* 当前属性值
*
*
* @type {string}
* @type {string}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
()
public
value
!
:
string
;
@
Prop
()
public
value
!
:
string
;
/**
/**
* 当前表单状态
* 当前表单状态
*
*
* @type {*}
* @type {*}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
()
public
formState
!
:
any
;
@
Prop
()
public
formState
!
:
any
;
/**
/**
* 默认为当前实体名称,有指定则按表单参数
* 默认为当前实体名称,有指定则按表单参数
*
*
* @type {string}
* @type {string}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
()
public
folder
!
:
string
;
@
Prop
()
public
folder
!
:
string
;
/**
/**
* 默认为当前实体主键id,有指定则按表单参数
* 默认为当前实体主键id,有指定则按表单参数
*
*
* @type {string}
* @type {string}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
()
public
ownerid
!
:
string
;
@
Prop
()
public
ownerid
!
:
string
;
/**
/**
* 默认为当前属性名,有指定则按表单参数
* 默认为当前属性名,有指定则按表单参数
*
*
* @type {string}
* @type {string}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
()
public
ownertype
!
:
string
;
@
Prop
()
public
ownertype
!
:
string
;
/**
/**
* 持久化
* 持久化
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
({
default
:
false
})
public
persistence
?:
boolean
;
@
Prop
({
default
:
false
})
public
persistence
?:
boolean
;
/**
/**
* 是否显示拖拽区域
* 是否显示拖拽区域
*
*
* @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
showPreview
?:
boolean
;
/**
/**
* 是否显示在线编辑按钮
* 是否显示在线编辑按钮
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
@
Prop
({
default
:
false
})
public
showEdit
?:
boolean
;
@
Prop
({
default
:
false
})
public
showEdit
?:
boolean
;
/**
/**
* 是否显示OCR按钮
* 是否显示OCR按钮
*
*
* @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'时处于新建未保存)
*
*
* @type {string}
* @type {string}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
srfuf
:
string
=
'0'
;
public
srfuf
:
string
=
'0'
;
/**
/**
* 文件列表
* 文件列表
*
*
* @type {Array<any>}
* @type {Array<any>}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
uploadFileList
:
Array
<
any
>
=
[];
public
uploadFileList
:
Array
<
any
>
=
[];
/**
/**
* 当前登陆人的token
* 当前登陆人的token
*
*
* @type {string}
* @type {string}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
token
:
string
=
"Bearer "
+
localStorage
.
getItem
(
'token'
);
public
token
:
string
=
"Bearer "
+
localStorage
.
getItem
(
'token'
);
/**
/**
* 上传文件请求头
* 上传文件请求头
*
*
* @type {*}
* @type {*}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
myHeaders
:
any
=
{
Authorization
:
this
.
token
};
public
myHeaders
:
any
=
{
Authorization
:
this
.
token
};
/**
/**
* 表单状态事件
* 表单状态事件
*
*
* @type {*}
* @type {*}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
formStateEvent
:
any
|
Unsubscribable
|
undefined
;
public
formStateEvent
:
any
|
Unsubscribable
|
undefined
;
/**
/**
* 批量更新标识,false为不更新,true才可以更新
* 批量更新标识,false为不更新,true才可以更新
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
isUpdateBatch
:
boolean
=
true
;
public
isUpdateBatch
:
boolean
=
true
;
/**
/**
* 新建状态标识,true为新建,false为编辑
* 新建状态标识,true为新建,false为编辑
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
isCreate
:
boolean
=
true
;
public
isCreate
:
boolean
=
true
;
/**
/**
* 拼接上传路径
* 是否显示自定义弹框
*
*/
* @memberof DiskFileUpload
public
showDialog
=
false
;
*/
public
getAction
()
{
/**
const
uploadUrl
=
'/net-disk/upload/'
+
this
.
getFolder
()
+
'?ownertype='
+
this
.
getOwnertype
()
+
'&ownerid='
+
this
.
getOwnerid
();
* 嵌入自定义弹框中iframe的url
return
uploadUrl
;
*/
}
public
iframeUrl
:
any
=
''
;
/**
* 关闭自定义弹框
*/
public
dialogClose
()
{
this
.
showDialog
=
false
;
this
.
iframeUrl
=
''
;
let
iframe
:
any
=
document
.
getElementById
(
"fileIframe"
);
iframe
.
parentNode
.
removeChild
(
"fileIframe"
);
}
/**
/**
* return folder
* 拼接上传路径
*
*
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
getFolder
()
{
public
getAction
()
{
const
folder
=
typeof
this
.
folder
==
"string"
?
this
.
folder
:
JSON
.
stringify
(
this
.
folder
);
return
'/net-disk/upload/'
+
this
.
getFolder
()
+
'?ownertype='
+
this
.
getOwnertype
()
+
'&ownerid='
+
this
.
getOwnerid
();
return
folder
;
}
}
/**
/**
* return ownertype
* return folder
*
*
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
getOwnertype
()
{
public
getFolder
()
{
const
ownertype
=
typeof
this
.
ownertype
==
"string"
?
this
.
ownertype
:
JSON
.
stringify
(
this
.
ownertype
);
return
typeof
this
.
folder
==
"string"
?
this
.
folder
:
JSON
.
stringify
(
this
.
folder
);
return
ownertype
;
}
}
/**
/**
* return ownerid
* return ownertype
*
*
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
getOwnerid
()
{
public
getOwnertype
()
{
const
ownerid
=
typeof
this
.
ownerid
==
"string"
?
this
.
ownerid
:
JSON
.
stringify
(
this
.
ownerid
);
return
typeof
this
.
ownertype
==
"string"
?
this
.
ownertype
:
JSON
.
stringify
(
this
.
ownertype
);
return
ownerid
;
}
}
/**
/**
*
* return ownerid
*
*
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
created
(){
public
getOwnerid
()
{
this
.
formStateEvent
=
this
.
formState
.
subscribe
((
$event
:
any
)
=>
{
return
typeof
this
.
ownerid
==
"string"
?
this
.
ownerid
:
JSON
.
stringify
(
this
.
ownerid
);
// 表单加载完成
}
if
(
Object
.
is
(
$event
.
type
,
'load'
))
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
$event
.
data
));
/**
// 编辑表单,保存时不进行批量更新
*
if
(
data
.
srfuf
==
'1'
)
{
*
this
.
isCreate
=
false
;
* @memberof DiskFileUpload
this
.
isUpdateBatch
=
false
;
*/
}
public
created
()
{
// 当persistence = true时
this
.
formStateEvent
=
this
.
formState
.
subscribe
((
$event
:
any
)
=>
{
if
(
this
.
persistence
==
true
)
{
// 表单加载完成
// 直接从表单的data数据里获取当前属性的值
if
(
Object
.
is
(
$event
.
type
,
'load'
))
{
if
(
data
[
this
.
formItemName
]
&&
this
.
uploadFileList
.
length
==
0
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
$event
.
data
));
const
files
=
JSON
.
parse
(
data
[
this
.
formItemName
]);
// 编辑表单,保存时不进行批量更新
for
(
let
i
=
0
;
i
<
files
.
length
;
i
++
)
{
if
(
data
.
srfuf
==
'1'
)
{
this
.
uploadFileList
.
push
(
files
[
i
]);
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'
))
{
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
,
'update'
);
}
}
}
}
});
});
}
}
/**
/**
* 获取文件列表
* 获取文件列表
*
*
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
getFiles
()
{
public
getFiles
()
{
// 拼接url
// 拼接url
let
_this
:
any
=
this
;
let
_this
:
any
=
this
;
const
getUrl
=
'/net-disk/files/'
+
this
.
getFolder
();
const
getUrl
=
'/net-disk/files/'
+
this
.
getFolder
();
// 发送get请求
// 发送get请求
Axios
.
get
(
getUrl
,
{
Axios
.
get
(
getUrl
,
{
...
@@ -319,7 +357,7 @@ export default class DiskFileUpload extends Vue {
...
@@ -319,7 +357,7 @@ export default class DiskFileUpload extends Vue {
},
},
}).
then
(
response
=>
{
}).
then
(
response
=>
{
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
;
}
}
// 返回的是一个jsonArray
// 返回的是一个jsonArray
...
@@ -330,262 +368,290 @@ export default class DiskFileUpload extends Vue {
...
@@ -330,262 +368,290 @@ export default class DiskFileUpload extends Vue {
}
}
}
}
}).
catch
(
error
=>
{
}).
catch
(
error
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.getFileFailure'
)
+
':'
+
error
);
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.getFileFailure'
)
+
':'
+
error
);
});
});
}
}
/**
/**
* 自定义上传文件
* 自定义上传文件
*
*
* @param 上传文件
* @param 上传文件
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
customUploadFile
(
param
:
any
)
{
public
customUploadFile
(
param
:
any
)
{
// 上传的文件
// 上传的文件
let
_this
:
any
=
this
;
let
_this
:
any
=
this
;
let
file
=
param
.
file
;
let
file
=
param
.
file
;
// formData传参
// formData传参
let
formData
=
new
FormData
();
let
formData
=
new
FormData
();
formData
.
append
(
'file'
,
file
);
formData
.
append
(
'file'
,
file
);
// 拼接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
=>
{
if
(
!
response
||
response
.
status
!=
200
)
{
if
(
!
response
||
response
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.loadFailure'
)
+
'!'
);
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.loadFailure'
)
+
'!'
);
}
// 返回的是一个jsonobject
if
(
response
.
data
)
{
// 新建表单上传,后续需要批量更新操作
if
(
this
.
isCreate
==
true
)
{
this
.
isUpdateBatch
=
true
;
}
}
// 保存到文件列表进行显示
// 返回的是一个jsonobject
this
.
uploadFileList
.
push
(
response
.
data
);
if
(
response
.
data
)
{
// persistence=true时需要持久化表单属性
// 新建表单上传,后续需要批量更新操作
if
(
this
.
persistence
==
true
&&
this
.
uploadFileList
.
length
>
0
)
{
if
(
this
.
isCreate
==
true
)
{
const
value
=
JSON
.
stringify
(
this
.
uploadFileList
);
this
.
isUpdateBatch
=
true
;
this
.
$emit
(
'formitemvaluechange'
,
{
name
:
this
.
formItemName
,
value
:
value
});
}
// 保存到文件列表进行显示
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
(
err
=>
{
}).
catch
(
err
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.loadFailure'
)
+
':'
+
err
);
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.loadFailure'
)
+
':'
+
err
);
})
})
}
}
/**
* 下载文件
*
* @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
=>
{
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对象获取文件流
var
blob
=
new
Blob
([
response
.
data
],
{
type
:
response
.
headers
[
'content-type'
]});
// 创建下载链接
var
href
=
URL
.
createObjectURL
(
blob
);
// 创建一个a元素并设置相关属性
var
a
=
document
.
createElement
(
'a'
);
a
.
href
=
href
;
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
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.downloadFile'
)
+
':'
+
error
);
});
}
/**
* 预览文件
*
* @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
previewUrl
=
'/net-disk/preview/'
+
this
.
getFolder
()
+
'/'
+
id
+
'/'
+
name
+
'?authcode='
+
item
.
authcode
;
// 自定义弹框打开url
this
.
showDialog
=
true
;
this
.
iframeUrl
=
previewUrl
;
}
/**
/**
* 下载文件
* 编辑文件
*
*
* @param item 下载文件
* @param item
* @memberof DiskFileUpload
* @memberof DiskFileUpload
*/
*/
public
onDownload
(
item
:
any
)
{
public
onEdit
(
item
:
any
)
{
// 拼接url
// 拼接url
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
.
name
);
const
name
=
typeof
item
.
name
==
"string"
?
item
.
name
:
JSON
.
stringify
(
item
.
filename
);
const
editUrl
=
'/net-disk/editview/'
+
this
.
getFolder
()
+
'/'
+
id
+
'/'
+
name
+
'?authcode='
+
item
.
authcode
;
const
downloadUrl
=
'/net-disk/download/'
+
this
.
getFolder
()
+
'/'
+
id
+
'/'
+
name
;
// TODO:暂时用window.open
// 发送get请求
window
.
open
(
editUrl
);
Axios
.
get
(
downloadUrl
,
{
}
headers
:
{
'authcode'
:
item
.
authcode
/**
},
* ocr识别
responseType
:
'arraybuffer'
,
* @param item
}).
then
(
response
=>
{
* @memberof DiskFileUpload
if
(
!
response
||
response
.
status
!=
200
)
{
*/
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.downloadFile'
)
+
'!'
);
public
onOcr
(
item
:
any
)
{
return
;
// 拼接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
;
// 自定义弹框打开url
this
.
showDialog
=
true
;
this
.
iframeUrl
=
ocrUrl
;
}
/**
* 删除文件
*
* @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
=>
{
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
=>
{
// 提示删除失败
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.deleteFileFailure'
)
+
':'
+
error
);
});
});
}
}
// 请求成功,后台返回的是一个文件流
}
if
(
response
.
data
)
{
// 获取文件名
/**
const
disposition
=
response
.
headers
[
'content-disposition'
];
* 批量更新文件表的ownerid
const
filename
=
disposition
.
split
(
'filename='
)[
1
];
*
// 用blob对象获取文件流
* @memberof DiskFileUpload
var
blob
=
new
Blob
([
response
.
data
],
{
type
:
response
.
headers
[
'content-type'
]});
*/
// 创建下载链接
public
updateFileBatch
(
files
:
any
,
opt
:
any
)
{
var
href
=
URL
.
createObjectURL
(
blob
);
let
_this
:
any
=
this
;
// 创建一个a元素并设置相关属性
// 拼接url
var
a
=
document
.
createElement
(
'a'
);
const
updateUrl
=
'/net-disk/files/'
+
this
.
getFolder
()
+
'?ownertype='
+
this
.
getOwnertype
()
+
"&ownerid="
+
this
.
getOwnerid
();
a
.
href
=
href
;
// requestBody参数
a
.
download
=
filename
;
let
requestBody
=
[];
// 添加a元素到当前网页
if
(
files
)
{
document
.
body
.
appendChild
(
a
);
requestBody
=
files
;
// 触发a元素的点击事件,实现下载
a
.
click
();
// 从当前网页移除a元素
document
.
body
.
removeChild
(
a
);
// 释放blob对象
URL
.
revokeObjectURL
(
href
);
}
else
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.downloadFile1'
));
}
}
}).
catch
(
error
=>
{
// 发送post请求
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.downloadFile'
)
+
':'
+
error
);
Axios
.
post
(
updateUrl
,
requestBody
,
{
});
headers
:
{
"Content-Type"
:
"application/json;charset=UTF-8"
},
timeout
:
2000
}).
then
(
response
=>
{
if
(
!
response
||
response
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.updateFailure'
)
+
'!'
);
return
;
}
}).
catch
(
error
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.updateFailure'
)
+
':'
+
error
);
});
}
}
</
script
>
<
style
lang=
"less"
>
#file-upload {
width: auto;
height: auto;
border: 0px solid black;
}
}
/**
#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
previewUrl
=
'/net-disk/preview/'
+
this
.
getFolder
()
+
'/'
+
id
+
'/'
+
name
+
'?authcode='
+
item
.
authcode
;
// 新窗口打开url
window
.
open
(
previewUrl
);
}
}
/**
.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
;
// 新窗口打开url
window
.
open
(
editUrl
);
}
}
/**
.withoutDrag {
* ocr识别
border: 0px solid grey;
* @param item
width: 400px;
* @memberof DiskFileUpload
text-align: left;
*/
padding-left: 0px;
public
onOcr
(
item
:
any
)
{
padding-top: 0px;
// 拼接url
margin-top: 0px;
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
;
// 新窗口打开url
window
.
open
(
ocrUrl
);
}
}
/**
.fileList {
* 删除文件
width: 400px;
*
border: 0px solid grey;
* @param item
margin-top: 0px;
* @param index
}
* @memberof DiskFileUpload
*/
.fileTitle {
public
onRemove
(
item
:
any
,
index
:
number
)
{
text-align: left;
let
_this
:
any
=
this
;
margin-left: 0px;
if
(
item
)
{
}
MessageBox
.
confirm
(
_this
.
$t
(
'components.diskFileUpload.deleteFile'
),
_this
.
$t
(
'components.diskFileUpload.deleteFilePrompt'
),
{
confirmButtonText
:
_this
.
$t
(
'components.diskFileUpload.true'
),
.fileTitle i {
cancelButtonText
:
_this
.
$t
(
'components.diskFileUpload.false'
),
margin-right: 5px;
type
:
'warning'
}
}).
then
(()
=>
{
// 拼接url
.fileMain {
const
deleteUrl
=
'/net-disk/files/'
+
item
.
id
;
text-align: left;
// 发送delete请求
margin-left: 0px;
Axios
.
delete
(
deleteUrl
).
then
(
response
=>
{
margin-top: -10px;
if
(
!
response
||
response
.
status
!=
200
)
{
}
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.deleteFileFailure'
)
+
'!'
);
}
.fileMain .el-link:nth-child(n+2) {
// 从文件列表中删除
margin-left: 10px;
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
=>
{
// 提示删除失败
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.deleteFileFailure'
)
+
':'
+
error
);
});
});
}
}
}
/**
.dialogDiv{
* 批量更新文件表的ownerid
// el-dialog头部
*
.el-dialog__header{
* @memberof DiskFileUpload
height:40px;
*/
}
public
updateFileBatch
(
files
:
any
,
opt
:
any
)
{
// el-dialog面板
let
_this
:
any
=
this
;
.el-dialog__wrapper {
// 拼接url
height: 90vh;
const
updateUrl
=
'/net-disk/files/'
+
this
.
getFolder
()
+
'?ownertype='
+
this
.
getOwnertype
()
+
"&ownerid="
+
this
.
getOwnerid
();
overflow: visible;
// requestBody参数
}
let
requestBody
=
[];
if
(
files
)
{
// el-dialog
requestBody
=
files
;
.el-dialog {
height: 100%;
}
// el-dailog内容
.el-dialog__body {
height: inherit;
}
#fileIframe{
height: calc(100% - 40px);
}
}
// 发送post请求
Axios
.
post
(
updateUrl
,
requestBody
,
{
headers
:
{
"Content-Type"
:
"application/json;charset=UTF-8"
},
timeout
:
2000
}).
then
(
response
=>
{
if
(
!
response
||
response
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.updateFailure'
)
+
'!'
);
return
;
}
}).
catch
(
error
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskFileUpload.updateFailure'
)
+
':'
+
error
);
});
}
}
}
</
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;
}
</
style
>
</
style
>
\ No newline at end of file
app_web/src/components/disk-image-upload/disk-image-upload.vue
浏览文件 @
0fb6ad5d
...
@@ -14,259 +14,345 @@
...
@@ -14,259 +14,345 @@
<img
class=
"el-upload-list__item-thumbnail"
:src=
"file.url"
>
<img
class=
"el-upload-list__item-thumbnail"
:src=
"file.url"
>
<span
class=
"el-upload-list__item-actions"
>
<span
class=
"el-upload-list__item-actions"
>
<!--预览按钮-->
<!--预览按钮-->
<span
class=
"el-upload-list__item-preview"
@
click=
"onPreview(file)"
:title=
"$t('components.diskImageUpload.preview')"
<span
class=
"el-upload-list__item-preview"
@
click=
"onPreview(file)"
:title=
"$t('components.diskImageUpload.preview')"
v-show=
"showPreview"
>
v-show=
"showPreview"
>
<i
class=
"el-icon-view"
></i>
<i
class=
"el-icon-view"
></i>
</span>
</span>
<!--OCR按钮-->
<!--OCR按钮-->
<span
class=
"el-upload-list__item-delete"
@
click=
"onOcr(file)"
:title=
"$t('components.diskImageUpload.OCRdiscern')"
<span
class=
"el-upload-list__item-delete"
@
click=
"onOcr(file)"
:title=
"$t('components.diskImageUpload.OCRdiscern')"
v-show=
"showOcrview && (file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/))"
>
v-show=
"showOcrview && (file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/))"
>
<i
class=
"el-icon-camera"
></i>
<i
class=
"el-icon-camera"
></i>
</span>
</span>
<!--下载按钮-->
<!--下载按钮-->
<span
class=
"el-upload-list__item-delete"
@
click=
"onDownload(file)"
:title=
"$t('components.diskImageUpload.load')"
>
<span
class=
"el-upload-list__item-delete"
@
click=
"onDownload(file)"
:title=
"$t('components.diskImageUpload.load')"
>
<i
class=
"el-icon-download"
></i>
<i
class=
"el-icon-download"
></i>
</span>
</span>
<!--删除按钮-->
<!--删除按钮-->
<span
class=
"el-upload-list__item-delete"
@
click=
"onRemove(file)"
:title=
"$t('components.diskImageUpload.delete')"
>
<span
class=
"el-upload-list__item-delete"
@
click=
"onRemove(file)"
:title=
"$t('components.diskImageUpload.delete')"
>
<i
class=
"el-icon-delete"
></i>
<i
class=
"el-icon-delete"
></i>
</span>
</span>
</span>
</span>
</div>
</div>
</el-upload>
</el-upload>
<!-- 预览弹框 -->
<el-dialog
:visible
.
sync=
"dialogVisible"
:modal=
"false"
>
<el-dialog
:visible
.
sync=
"dialogVisible"
:modal=
"false"
>
<img
width=
"100%"
:src=
"dialogImageUrl"
alt=
""
>
<img
width=
"100%"
:src=
"dialogImageUrl"
alt=
""
>
</el-dialog>
</el-dialog>
<!-- 自定义弹框 -->
<div
class=
"dialogDiv"
>
<el-dialog
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>
</el-dialog>
</div>
</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
{
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
{
Subject
,
Unsubscribable
}
from
'rxjs'
;
@
Component
({})
@
Component
({})
export
default
class
DiskImageUplaod
extends
Vue
{
export
default
class
DiskImageUplaod
extends
Vue
{
/**
/**
* 当前表单对象
* 当前表单对象
*
*
* @type {*}
* @type {*}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
()
public
data
!
:
any
;
@
Prop
()
public
data
!
:
any
;
/**
/**
* 当前属性名
* 当前属性名
*
*
* @type {string}
* @type {string}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
()
public
formItemName
!
:
string
;
@
Prop
()
public
formItemName
!
:
string
;
/**
/**
* 当前属性值
* 当前属性值
*
*
* @type {string}
* @type {string}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
()
public
value
!
:
string
;
@
Prop
()
public
value
!
:
string
;
/**
/**
* 当前表单状态
* 当前表单状态
*
*
* @type {*}
* @type {*}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
()
public
formState
!
:
any
;
@
Prop
()
public
formState
!
:
any
;
/**
/**
* 默认为当前实体名称,有指定则按表单参数
* 默认为当前实体名称,有指定则按表单参数
*
*
* @type {string}
* @type {string}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
()
public
folder
!
:
string
;
@
Prop
()
public
folder
!
:
string
;
/**
/**
* 默认为当前实体主键id,有指定则按表单参数
* 默认为当前实体主键id,有指定则按表单参数
*
*
* @type {string}
* @type {string}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
()
public
ownerid
!
:
string
;
@
Prop
()
public
ownerid
!
:
string
;
/**
/**
* 默认为当前属性名,有指定则按表单参数
* 默认为当前属性名,有指定则按表单参数
*
*
* @type {string}
* @type {string}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
()
public
ownertype
!
:
string
;
@
Prop
()
public
ownertype
!
:
string
;
/**
/**
* 持久化
* 持久化
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
({
default
:
false
})
public
persistence
?:
boolean
;
@
Prop
({
default
:
false
})
public
persistence
?:
boolean
;
/**
/**
* 是否显示预览按钮
* 是否显示预览按钮
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
({
default
:
false
})
public
showPreview
?:
boolean
;
@
Prop
({
default
:
false
})
public
showPreview
?:
boolean
;
/**
/**
* 是否显示OCR按钮
* 是否显示OCR按钮
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
@
Prop
({
default
:
false
})
public
showOcrview
?:
boolean
;
@
Prop
({
default
:
false
})
public
showOcrview
?:
boolean
;
/**
/**
* 表单是否处于编辑状态(有真实主键,srfuf='1';srfuf='0'时处于新建未保存)
* 表单是否处于编辑状态(有真实主键,srfuf='1';srfuf='0'时处于新建未保存)
*
*
* @type {string}
* @type {string}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
srfuf
:
string
=
'0'
;
public
srfuf
:
string
=
'0'
;
/**
/**
* 图片列表
* 图片列表
*
*
* @type {Array<any>}
* @type {Array<any>}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
imageList
:
Array
<
any
>
=
[];
public
imageList
:
Array
<
any
>
=
[];
/**
/**
* 当前登陆人的token
* 当前登陆人的token
*
*
* @type {string}
* @type {string}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
token
:
string
=
"Bearer "
+
localStorage
.
getItem
(
'token'
);
public
token
:
string
=
"Bearer "
+
localStorage
.
getItem
(
'token'
);
/**
/**
* 上传文件请求头
* 上传文件请求头
*
*
* @type {*}
* @type {*}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
myHeaders
:
any
=
{
Authorization
:
this
.
token
};
public
myHeaders
:
any
=
{
Authorization
:
this
.
token
};
/**
/**
* 表单状态事件
* 表单状态事件
*
*
* @type {*}
* @type {*}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
formStateEvent
:
any
|
Unsubscribable
|
undefined
;
public
formStateEvent
:
any
|
Unsubscribable
|
undefined
;
/**
/**
* 批量更新标识,false为不更新,true才可以更新
* 批量更新标识,false为不更新,true才可以更新
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
isUpdateBatch
:
boolean
=
true
;
public
isUpdateBatch
:
boolean
=
true
;
/**
/**
* 新建状态标识,true为新建,false为编辑
* 新建状态标识,true为新建,false为编辑
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
isCreate
:
boolean
=
true
;
public
isCreate
:
boolean
=
true
;
/**
/**
* 预览弹出框显示标识,true显示,false隐藏
* 预览弹出框显示标识,true显示,false隐藏
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
dialogVisible
:
boolean
=
false
;
public
dialogVisible
:
boolean
=
false
;
/**
/**
* 预览弹出框中的图片地址
* 预览弹出框中的图片地址
*
*
* @type {string}
* @type {string}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
dialogImageUrl
:
string
=
''
;
public
dialogImageUrl
:
string
=
''
;
/**
/**
* 存放图片的fileid,用于图片列表定位
* 存放图片的fileid,用于图片列表定位
*
*
* @type {boolean}
* @type {boolean}
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
imageFileids
:
Array
<
any
>
=
[];
public
imageFileids
:
Array
<
any
>
=
[];
/**
/**
* 拼接上传路径
* 是否显示自定义弹框
*
*/
* @memberof DiskImageUplaod
public
showDialog
=
false
;
*/
public
getAction
()
{
/**
return
'/net-disk/upload/'
+
this
.
getFolder
()
+
'?ownertype='
+
this
.
getOwnertype
()
+
'&ownerid='
+
this
.
getOwnerid
();
* 嵌入自定义弹框中iframe的url
}
*/
public
iframeUrl
:
any
=
''
;
/**
* 关闭自定义弹框
*/
public
dialogClose
()
{
this
.
showDialog
=
false
;
this
.
iframeUrl
=
''
;
let
iframe
:
any
=
document
.
getElementById
(
"fileIframe"
);
iframe
.
parentNode
.
removeChild
(
"fileIframe"
);
}
/**
/**
* return folder
* 拼接上传路径
*
*
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
getFolder
()
{
public
getAction
()
{
return
typeof
this
.
folder
==
"string"
?
this
.
folder
:
JSON
.
stringify
(
this
.
folder
);
return
'/net-disk/upload/'
+
this
.
getFolder
()
+
'?ownertype='
+
this
.
getOwnertype
()
+
'&ownerid='
+
this
.
getOwnerid
(
);
}
}
/**
/**
* return ownertype
* return folder
*
*
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
getOwnertype
()
{
public
getFolder
()
{
return
typeof
this
.
ownertype
==
"string"
?
this
.
ownertype
:
JSON
.
stringify
(
this
.
ownertype
);
return
typeof
this
.
folder
==
"string"
?
this
.
folder
:
JSON
.
stringify
(
this
.
folder
);
}
}
/**
/**
* return ownerid
* return ownertype
*
*
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
getOwnerid
()
{
public
getOwnertype
()
{
return
typeof
this
.
ownerid
==
"string"
?
this
.
ownerid
:
JSON
.
stringify
(
this
.
ownerid
);
return
typeof
this
.
ownertype
==
"string"
?
this
.
ownertype
:
JSON
.
stringify
(
this
.
ownertype
);
}
}
/**
* return ownerid
*
* @memberof DiskImageUplaod
*/
public
getOwnerid
()
{
return
typeof
this
.
ownerid
==
"string"
?
this
.
ownerid
:
JSON
.
stringify
(
this
.
ownerid
);
}
/**
* vue生命周期create
*
* @memberof DiskImageUplaod
*/
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
.
imageList
.
length
==
0
)
{
const
files
=
JSON
.
parse
(
data
[
this
.
formItemName
]);
files
.
forEach
((
item
:
any
,
i
:
number
)
=>
{
// 图片列表显示缩略图需要获取真实的图片信息
if
(
item
.
id
&&
item
.
name
)
{
this
.
getRealImageData
(
item
);
}
});
}
}
else
{
// 发送get请求获取图片列表
this
.
getFiles
();
}
}
// 表单保存完成
if
(
Object
.
is
(
$event
.
type
,
'save'
))
{
// 批量更新文件表中的ownerid
if
(
this
.
isUpdateBatch
==
true
&&
this
.
imageList
.
length
>
0
)
{
this
.
updateFileBatch
(
this
.
imageList
);
}
}
});
}
/**
/**
* vue生命周期create
* 获取图片列表
*
*
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
created
()
{
public
getFiles
()
{
this
.
formStateEvent
=
this
.
formState
.
subscribe
((
$event
:
any
)
=>
{
// 拼接url
// 表单加载完成
let
_this
:
any
=
this
;
if
(
Object
.
is
(
$event
.
type
,
'load'
))
{
const
getUrl
=
'/net-disk/files/'
+
this
.
getFolder
();
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
$event
.
data
));
// 发送get请求
// 编辑表单,保存时不进行批量更新
Axios
.
get
(
getUrl
,
{
if
(
data
.
srfuf
==
'1'
)
{
params
:
{
this
.
isCreate
=
false
;
ownertype
:
this
.
getOwnertype
(),
this
.
isUpdateBatch
=
false
;
ownerid
:
this
.
getOwnerid
(),
},
}).
then
(
response
=>
{
if
(
!
response
||
response
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.getImageFailure'
)
+
"!"
);
return
;
}
}
// 当persistence = true时,表单持久化
// 返回的是一个jsonArray
if
(
this
.
persistence
==
true
)
{
if
(
response
.
data
)
{
// 直接从表单的data数据里获取当前属性的值
const
files
=
JSON
.
parse
(
JSON
.
stringify
(
response
.
data
));
if
(
data
[
this
.
formItemName
]
&&
this
.
imageList
.
length
==
0
)
{
if
(
this
.
imageList
.
length
==
0
)
{
const
files
=
JSON
.
parse
(
data
[
this
.
formItemName
]);
files
.
forEach
((
item
:
any
,
i
:
number
)
=>
{
files
.
forEach
((
item
:
any
,
i
:
number
)
=>
{
// 图片列表显示缩略图需要获取真实的图片信息
// 图片列表显示缩略图需要获取真实的图片信息
if
(
item
.
id
&&
item
.
name
)
{
if
(
item
.
id
&&
item
.
name
)
{
...
@@ -274,352 +360,332 @@ export default class DiskImageUplaod extends Vue {
...
@@ -274,352 +360,332 @@ export default class DiskImageUplaod extends Vue {
}
}
});
});
}
}
}
else
{
// 发送get请求获取图片列表
this
.
getFiles
();
}
}
// 表单保存完成
if
(
Object
.
is
(
$event
.
type
,
'save'
))
{
// 批量更新文件表中的ownerid
if
(
this
.
isUpdateBatch
==
true
&&
this
.
imageList
.
length
>
0
)
{
this
.
updateFileBatch
(
this
.
imageList
);
}
}
}
}).
catch
(
error
=>
{
});
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.getImageFailure'
)
+
':'
+
error
);
}
});
}
/**
/**
* 获取图片列表
* 获取真实的图片信息
*
* @param file
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
getFiles
()
{
public
getRealImageData
(
file
:
any
)
{
// 拼接url
let
fileData
=
file
;
let
_this
:
any
=
this
;
let
_this
:
any
=
this
;
const
getUrl
=
'/net-disk/files/'
+
this
.
getFolder
();
// 拼接url,与下载一致
// 发送get请求
const
downloadUrl
=
'/net-disk/download/'
+
this
.
getFolder
()
+
'/'
+
fileData
.
id
+
'/'
+
fileData
.
name
;
Axios
.
get
(
getUrl
,
{
// 发送get请求
params
:
{
Axios
.
get
(
downloadUrl
,
{
ownertype
:
this
.
getOwnertype
(),
headers
:
{
ownerid
:
this
.
getOwnerid
(),
'authcode'
:
fileData
.
authcode
},
},
}).
then
(
response
=>
{
responseType
:
'blob'
,
if
(
!
response
||
response
.
status
!=
200
)
{
}).
then
(
res
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.getImageFailure'
)
+
"!"
);
if
(
!
res
||
res
.
status
!=
200
)
{
return
;
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure'
)
+
'!'
);
}
// 返回的是一个jsonArray
if
(
response
.
data
)
{
const
files
=
JSON
.
parse
(
JSON
.
stringify
(
response
.
data
));
if
(
this
.
imageList
.
length
==
0
)
{
files
.
forEach
((
item
:
any
,
i
:
number
)
=>
{
// 图片列表显示缩略图需要获取真实的图片信息
if
(
item
.
id
&&
item
.
name
)
{
this
.
getRealImageData
(
item
);
}
});
}
}
}
// 请求成功,后台返回的是一个文件流
}).
catch
(
error
=>
{
if
(
res
.
data
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.getImageFailure'
)
+
':'
+
error
);
// 用blob对象获取文件流
});
var
blob
=
new
Blob
([
res
.
data
],
{
type
:
res
.
headers
[
'content-type'
]});
}
// 通过文件流创建下载链接
var
href
=
URL
.
createObjectURL
(
blob
);
/**
// 将下载链接保存到图片中
* 获取真实的图片信息
fileData
.
url
=
href
;
* @param file
// 保存图片fileid
* @memberof DiskImageUplaod
if
(
fileData
.
fileid
)
{
*/
this
.
imageFileids
.
push
(
fileData
.
fileid
);
public
getRealImageData
(
file
:
any
)
{
}
else
if
(
fileData
.
id
)
{
let
fileData
=
file
;
this
.
imageFileids
.
push
(
fileData
.
id
);
let
_this
:
any
=
this
;
}
else
{
// 拼接url,与下载一致
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.ImageIdNone'
));
const
downloadUrl
=
'/net-disk/download/'
+
this
.
getFolder
()
+
'/'
+
fileData
.
id
+
'/'
+
fileData
.
name
;
return
;
// 发送get请求
}
Axios
.
get
(
downloadUrl
,
{
// 保存图片到图片列表进行显示
headers
:
{
this
.
imageList
.
push
(
fileData
);
'authcode'
:
fileData
.
authcode
},
responseType
:
'blob'
,
}).
then
(
res
=>
{
if
(
!
res
||
res
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure'
)
+
'!'
);
}
// 请求成功,后台返回的是一个文件流
if
(
res
.
data
)
{
// 用blob对象获取文件流
var
blob
=
new
Blob
([
res
.
data
],
{
type
:
res
.
headers
[
'content-type'
]});
// 通过文件流创建下载链接
var
href
=
URL
.
createObjectURL
(
blob
);
// 将下载链接保存到图片中
fileData
.
url
=
href
;
// 保存图片fileid
if
(
fileData
.
fileid
)
{
this
.
imageFileids
.
push
(
fileData
.
fileid
);
}
else
if
(
fileData
.
id
)
{
this
.
imageFileids
.
push
(
fileData
.
id
);
}
else
{
}
else
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.ImageIdNone'
));
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure1'
));
return
;
}
}
// 保存图片到图片列表进行显示
}).
catch
(
error
=>
{
this
.
imageList
.
push
(
fileData
);
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure'
)
+
':'
+
error
);
}
else
{
});
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure1'
));
}
}).
catch
(
error
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure'
)
+
':'
+
error
);
});
}
/**
* 上传之前
* @param file
* @memberof DiskImageUplaod
*/
public
beforeUpload
(
file
:
any
)
{
// 支持上传的图片格式
let
_this
:
any
=
this
;
if
(
!
file
.
name
.
match
(
/^.+
\.(
gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP
)
$/
))
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.uploadImageFailure1'
));
return
false
;
}
}
}
/**
/**
* 自定义图片上传
* 上传之前
* @param param
* @param file
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
customImageUpload
(
param
:
any
)
{
public
beforeUpload
(
file
:
any
)
{
let
_this
:
any
=
this
;
// 支持上传的图片格式
// 上传的文件
let
_this
:
any
=
this
;
let
file
=
param
.
file
;
if
(
!
file
.
name
.
match
(
/^.+
\.(
gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP
)
$/
))
{
// formData传参
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.uploadImageFailure1'
));
let
formData
=
new
FormData
();
return
false
;
formData
.
append
(
'file'
,
file
);
// 拼接url
const
uploadUrl
=
this
.
getAction
();
// 发送post请求
Axios
.
post
(
uploadUrl
,
formData
,
{
timeout
:
2000
}).
then
(
response
=>
{
if
(
!
response
||
response
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.uploadImageFailure'
)
+
"!"
);
}
}
// 返回的是一个jsonobject
}
if
(
response
.
data
)
{
let
returnData
=
response
.
data
;
/**
// 拼接缩略图下载url
* 自定义图片上传
const
downloadUrl
=
'/net-disk/download/'
+
this
.
getFolder
()
+
'/'
+
returnData
.
id
+
'/'
+
returnData
.
name
;
* @param param
// 发送get请求
* @memberof DiskImageUplaod
Axios
.
get
(
downloadUrl
,
{
*/
headers
:
{
public
customImageUpload
(
param
:
any
)
{
'authcode'
:
returnData
.
authcode
let
_this
:
any
=
this
;
},
// 上传的文件
responseType
:
'blob'
,
let
file
=
param
.
file
;
}).
then
(
res
=>
{
// formData传参
if
(
!
res
||
res
.
status
!=
200
)
{
let
formData
=
new
FormData
();
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure'
)
+
"!"
);
formData
.
append
(
'file'
,
file
);
return
;
// 拼接url
}
const
uploadUrl
=
this
.
getAction
();
// 请求成功,后台返回的是一个文件流
// 发送post请求
if
(
res
.
data
)
{
Axios
.
post
(
uploadUrl
,
formData
,
{
timeout
:
2000
}).
then
(
response
=>
{
// 用blob对象获取文件流
if
(
!
response
||
response
.
status
!=
200
)
{
var
blob
=
new
Blob
([
res
.
data
],
{
type
:
res
.
headers
[
'content-type'
]});
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.uploadImageFailure'
)
+
"!"
);
// 通过文件流创建下载链接
}
var
href
=
URL
.
createObjectURL
(
blob
);
// 返回的是一个jsonobject
// 将下载链接保存到本次上传成功后返回的jsonobject中
if
(
response
.
data
)
{
returnData
.
url
=
href
;
let
returnData
=
response
.
data
;
// 保存jsonobject中的图片fileid
// 拼接缩略图下载url
if
(
returnData
.
fileid
)
{
const
downloadUrl
=
'/net-disk/download/'
+
this
.
getFolder
()
+
'/'
+
returnData
.
id
+
'/'
+
returnData
.
name
;
this
.
imageFileids
.
push
(
returnData
.
fileid
);
// 发送get请求
}
else
if
(
returnData
.
id
)
{
Axios
.
get
(
downloadUrl
,
{
this
.
imageFileids
.
push
(
returnData
.
id
);
headers
:
{
}
else
{
'authcode'
:
returnData
.
authcode
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.ImageIdNone'
));
},
responseType
:
'blob'
,
}).
then
(
res
=>
{
if
(
!
res
||
res
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure'
)
+
"!"
);
return
;
return
;
}
}
// 保存jsonobject到图片列表进行显示
// 请求成功,后台返回的是一个文件流
this
.
imageList
.
push
(
returnData
);
if
(
res
.
data
)
{
// 新建表单上传时,后续需要批量更新操作
// 用blob对象获取文件流
if
(
this
.
isCreate
==
true
)
{
var
blob
=
new
Blob
([
res
.
data
],
{
type
:
res
.
headers
[
'content-type'
]});
this
.
isUpdateBatch
=
true
;
// 通过文件流创建下载链接
}
var
href
=
URL
.
createObjectURL
(
blob
);
// persistence=true时,需要持久化表单属性
// 将下载链接保存到本次上传成功后返回的jsonobject中
if
(
this
.
persistence
==
true
&&
this
.
imageList
.
length
>
0
)
{
returnData
.
url
=
href
;
const
value
=
JSON
.
stringify
(
this
.
imageList
);
// 保存jsonobject中的图片fileid
this
.
$emit
(
'formitemvaluechange'
,
{
name
:
this
.
formItemName
,
value
:
value
});
if
(
returnData
.
fileid
)
{
this
.
imageFileids
.
push
(
returnData
.
fileid
);
}
else
if
(
returnData
.
id
)
{
this
.
imageFileids
.
push
(
returnData
.
id
);
}
else
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.ImageIdNone'
));
return
;
}
// 保存jsonobject到图片列表进行显示
this
.
imageList
.
push
(
returnData
);
// 新建表单上传时,后续需要批量更新操作
if
(
this
.
isCreate
==
true
)
{
this
.
isUpdateBatch
=
true
;
}
// persistence=true时,需要持久化表单属性
if
(
this
.
persistence
==
true
&&
this
.
imageList
.
length
>
0
)
{
const
value
=
JSON
.
stringify
(
this
.
imageList
);
this
.
$emit
(
'formitemvaluechange'
,
{
name
:
this
.
formItemName
,
value
:
value
});
}
}
else
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure1'
));
}
}
}
else
{
}).
catch
(
error
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure1'
));
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure'
)
+
':'
+
error
);
}
});
}).
catch
(
error
=>
{
}
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure'
)
+
':'
+
error
);
}).
catch
(
err
=>
{
});
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.uploadImageFailure'
)
+
':'
+
err
);
}
});
}).
catch
(
err
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.uploadImageFailure'
)
+
':'
+
err
);
});
}
/**
* 预览
* @param file
* @memberof DiskImageUplaod
*/
public
onPreview
(
file
:
any
)
{
let
_this
:
any
=
this
;
if
(
file
.
url
)
{
this
.
dialogImageUrl
=
file
.
url
;
this
.
dialogVisible
=
true
;
}
else
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.notImageUrl'
));
}
}
}
/**
* Ocr识别
* @param file
* @memberof DiskImageUplaod
*/
public
onOcr
(
file
:
any
)
{
// 拼接url
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
ocrUrl
=
'/net-disk/ocrview/'
+
this
.
getFolder
()
+
'/'
+
id
+
'/'
+
name
+
'?authcode='
+
file
.
authcode
;
// 新窗口打开url
window
.
open
(
ocrUrl
);
}
/**
/**
* 下载
* 预览
* @param file
* @param file
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
onDownload
(
file
:
any
)
{
public
onPreview
(
file
:
any
)
{
// 拼接url
let
_this
:
any
=
this
;
let
_this
:
any
=
this
;
if
(
file
.
url
)
{
const
id
=
typeof
file
.
id
==
"string"
?
file
.
id
:
JSON
.
stringify
(
file
.
id
);
this
.
dialogImageUrl
=
file
.
url
;
const
name
=
typeof
file
.
name
==
"string"
?
file
.
name
:
JSON
.
stringify
(
file
.
filename
);
this
.
dialogVisible
=
true
;
const
downloadUrl
=
'/net-disk/download/'
+
this
.
getFolder
()
+
'/'
+
id
+
'/'
+
name
;
// 发送get请求
Axios
.
get
(
downloadUrl
,
{
headers
:
{
'authcode'
:
file
.
authcode
},
responseType
:
'blob'
,
}).
then
(
response
=>
{
if
(
!
response
||
response
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure2'
)
+
'!'
);
return
;
}
// 请求成功,后台返回的是一个文件流
if
(
response
.
data
)
{
// 获取文件名
const
disposition
=
response
.
headers
[
'content-disposition'
];
const
filename
=
disposition
.
split
(
'filename='
)[
1
];
// 用blob对象获取文件流
var
blob
=
new
Blob
([
response
.
data
],
{
type
:
response
.
headers
[
'content-type'
]});
// 通过文件流创建下载链接
var
href
=
URL
.
createObjectURL
(
blob
);
// 创建一个a元素并设置相关属性
var
a
=
document
.
createElement
(
'a'
);
a
.
href
=
href
;
a
.
download
=
filename
;
// 添加a元素到当前网页
document
.
body
.
appendChild
(
a
);
// 触发a元素的点击事件,实现下载
a
.
click
();
// 下载完成,从当前网页移除a元素
document
.
body
.
removeChild
(
a
);
// 释放blob对象
URL
.
revokeObjectURL
(
href
);
}
else
{
}
else
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.
loadImageFailure3
'
));
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.
notImageUrl
'
));
}
}
}).
catch
(
error
=>
{
}
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure2'
)
+
':'
+
error
);
});
}
/**
* Ocr识别
* @param file
* @memberof DiskImageUplaod
*/
public
onOcr
(
file
:
any
)
{
// 拼接url
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
ocrUrl
=
'/net-disk/ocrview/'
+
this
.
getFolder
()
+
'/'
+
id
+
'/'
+
name
+
'?authcode='
+
file
.
authcode
;
// 自定义弹框打开url
this
.
showDialog
=
true
;
this
.
iframeUrl
=
ocrUrl
;
}
/**
/**
* 删除
* 下载
* @param file
* @param file
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
onRemove
(
file
:
any
)
{
public
onDownload
(
file
:
any
)
{
let
_this
:
any
=
this
;
// 拼接url
if
(
file
)
{
let
_this
:
any
=
this
;
MessageBox
.
confirm
(
_this
.
$t
(
'components.diskImageUpload.deleteFile'
),
_this
.
$t
(
'components.diskImageUpload.deleteFilePrompt'
),
{
const
id
=
typeof
file
.
id
==
"string"
?
file
.
id
:
JSON
.
stringify
(
file
.
id
);
confirmButtonText
:
_this
.
$t
(
'components.diskImageUpload.true'
),
const
name
=
typeof
file
.
name
==
"string"
?
file
.
name
:
JSON
.
stringify
(
file
.
filename
);
cancelButtonText
:
_this
.
$t
(
'components.diskImageUpload.false'
),
const
downloadUrl
=
'/net-disk/download/'
+
this
.
getFolder
()
+
'/'
+
id
+
'/'
+
name
;
type
:
'warning'
// 发送get请求
}).
then
(()
=>
{
Axios
.
get
(
downloadUrl
,
{
if
(
this
.
imageFileids
.
indexOf
(
file
.
id
)
!=
-
1
)
{
headers
:
{
// 要删除的图片在图片列表中的下标
'authcode'
:
file
.
authcode
const
index
=
this
.
imageFileids
.
indexOf
(
file
.
id
);
},
// 拼接url
responseType
:
'blob'
,
const
deleteUrl
=
'/net-disk/files/'
+
file
.
id
;
}).
then
(
response
=>
{
// 发送delete请求
if
(
!
response
||
response
.
status
!=
200
)
{
Axios
.
delete
(
deleteUrl
).
then
(
response
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure2'
)
+
'!'
);
if
(
!
response
||
response
.
status
!=
200
)
{
return
;
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.deleteImageFailure'
)
+
'!'
);
}
// 从fileid数组中删除
this
.
imageFileids
.
splice
(
index
,
1
);
// 从图片列表中删除
this
.
imageList
.
splice
(
index
,
1
);
// persistence=true,时需要持久化表单属性
if
(
this
.
persistence
==
true
)
{
const
value
=
JSON
.
stringify
(
this
.
imageList
);
this
.
$emit
(
'formitemvaluechange'
,
{
name
:
this
.
formItemName
,
value
:
value
});
}
}).
catch
(
error
=>
{
// 提示删除失败
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.deleteImageFailure'
)
+
':'
+
error
);
});
}
}
// 请求成功,后台返回的是一个文件流
if
(
response
.
data
)
{
// 获取文件名
const
disposition
=
response
.
headers
[
'content-disposition'
];
const
filename
=
disposition
.
split
(
'filename='
)[
1
];
// 用blob对象获取文件流
var
blob
=
new
Blob
([
response
.
data
],
{
type
:
response
.
headers
[
'content-type'
]});
// 通过文件流创建下载链接
var
href
=
URL
.
createObjectURL
(
blob
);
// 创建一个a元素并设置相关属性
var
a
=
document
.
createElement
(
'a'
);
a
.
href
=
href
;
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.diskImageUpload.loadImageFailure3'
));
}
}).
catch
(
error
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.loadImageFailure2'
)
+
':'
+
error
);
});
});
}
}
}
/**
/**
* 批量更新文件表的ownerid
* 删除
* @param files
* @param file
* @memberof DiskImageUplaod
* @memberof DiskImageUplaod
*/
*/
public
updateFileBatch
(
files
:
any
)
{
public
onRemove
(
file
:
any
)
{
let
_this
:
any
=
this
;
let
_this
:
any
=
this
;
// 拼接url
if
(
file
)
{
const
updateUrl
=
'/net-disk/files/'
+
this
.
getFolder
()
+
'?ownertype='
+
this
.
getOwnertype
()
+
"&ownerid="
+
this
.
getOwnerid
();
MessageBox
.
confirm
(
_this
.
$t
(
'components.diskImageUpload.deleteFile'
),
_this
.
$t
(
'components.diskImageUpload.deleteFilePrompt'
),
{
// requestBody参数
confirmButtonText
:
_this
.
$t
(
'components.diskImageUpload.true'
),
let
requestBody
=
[];
cancelButtonText
:
_this
.
$t
(
'components.diskImageUpload.false'
),
if
(
files
)
{
type
:
'warning'
requestBody
=
files
;
}).
then
(()
=>
{
if
(
this
.
imageFileids
.
indexOf
(
file
.
id
)
!=
-
1
)
{
// 要删除的图片在图片列表中的下标
const
index
=
this
.
imageFileids
.
indexOf
(
file
.
id
);
// 拼接url
const
deleteUrl
=
'/net-disk/files/'
+
file
.
id
;
// 发送delete请求
Axios
.
delete
(
deleteUrl
).
then
(
response
=>
{
if
(
!
response
||
response
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.deleteImageFailure'
)
+
'!'
);
}
// 从fileid数组中删除
this
.
imageFileids
.
splice
(
index
,
1
);
// 从图片列表中删除
this
.
imageList
.
splice
(
index
,
1
);
// persistence=true,时需要持久化表单属性
if
(
this
.
persistence
==
true
)
{
const
value
=
JSON
.
stringify
(
this
.
imageList
);
this
.
$emit
(
'formitemvaluechange'
,
{
name
:
this
.
formItemName
,
value
:
value
});
}
}).
catch
(
error
=>
{
// 提示删除失败
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.deleteImageFailure'
)
+
':'
+
error
);
});
}
});
}
}
}
// 发送post请求
Axios
.
post
(
updateUrl
,
requestBody
,
{
headers
:
{
/**
"Content-Type"
:
"application/json;charset=UTF-8"
* 批量更新文件表的ownerid
},
* @param files
timeout
:
2000
* @memberof DiskImageUplaod
}).
then
(
response
=>
{
*/
if
(
!
response
||
response
.
status
!=
200
)
{
public
updateFileBatch
(
files
:
any
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.updateFailure'
)
+
'!'
);
let
_this
:
any
=
this
;
return
;
// 拼接url
const
updateUrl
=
'/net-disk/files/'
+
this
.
getFolder
()
+
'?ownertype='
+
this
.
getOwnertype
()
+
"&ownerid="
+
this
.
getOwnerid
();
// requestBody参数
let
requestBody
=
[];
if
(
files
)
{
requestBody
=
files
;
}
}
}).
catch
(
error
=>
{
// 发送post请求
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.updateFailure'
)
+
':'
+
error
);
Axios
.
post
(
updateUrl
,
requestBody
,
{
});
headers
:
{
}
"Content-Type"
:
"application/json;charset=UTF-8"
},
timeout
:
2000
}).
then
(
response
=>
{
if
(
!
response
||
response
.
status
!=
200
)
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.updateFailure'
)
+
'!'
);
return
;
}
}).
catch
(
error
=>
{
Message
.
error
(
_this
.
$t
(
'components.diskImageUpload.updateFailure'
)
+
':'
+
error
);
});
}
}
}
</
script
>
</
script
>
<
style
scoped
>
<
style
lang=
"less"
>
.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);
}
}
</
style
>
</
style
>
\ No newline at end of file
编辑
预览
Markdown
格式
0%
请重试
or
添加新附件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录