Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
dfzx_10
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
dfzx_10
Commits
d8b62a10
Commit
d8b62a10
authored
Sep 27, 2019
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add upload-image-width-preview
parent
751801a3
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
338 additions
and
15 deletions
+338
-15
app.component.ts
src/app/app.component.ts
+4
-4
app.module.ts
src/app/app.module.ts
+13
-5
upload-image-with-preview.component.html
...age-with-preview/upload-image-with-preview.component.html
+37
-0
upload-image-with-preview.component.scss
...age-with-preview/upload-image-with-preview.component.scss
+101
-0
upload-image-with-preview.component.ts
...image-with-preview/upload-image-with-preview.component.ts
+149
-0
background-image.pipe.ts
src/app/pipes/background-image.pipe.ts
+23
-0
index.html
src/index.html
+4
-4
tslint.json
tslint.json
+7
-2
No files found.
src/app/app.component.ts
View file @
d8b62a10
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
@
Component
({
selector
:
'
app-root
'
,
...
...
@@ -6,11 +6,11 @@ import { Component ,OnInit} from '@angular/core';
styleUrls
:
[
'
./app.component.scss
'
]
})
export
class
AppComponent
implements
OnInit
{
type
=
'
play
'
;
type
=
'
play
'
;
constructor
()
{
constructor
()
{
let
tp
=
this
.
getQueryString
(
"
type
"
);
if
(
tp
){
if
(
tp
){
this
.
type
=
tp
;
}
}
...
...
src/app/app.module.ts
View file @
d8b62a10
...
...
@@ -3,20 +3,24 @@ import { BrowserModule } from '@angular/platform-browser';
import
{
BrowserAnimationsModule
}
from
'
@angular/platform-browser/animations
'
;
import
{
NgModule
}
from
'
@angular/core
'
;
import
{
FormsModule
}
from
'
@angular/forms
'
;
import
{
HttpClientModule
}
from
'
@angular/common/http
'
;
import
{
HttpClientModule
}
from
'
@angular/common/http
'
;
import
{
NgZorroAntdModule
,
NZ_I18N
,
zh_CN
}
from
'
ng-zorro-antd
'
;
import
{
Angular2FontawesomeModule
}
from
'
angular2-fontawesome/angular2-fontawesome
'
;
import
{
AppComponent
}
from
'
./app.component
'
;
import
{
FormComponent
}
from
'
./form/form.component
'
;
import
{
PlayComponent
}
from
'
./play/play.component
'
;
import
{
PlayComponent
}
from
"
./play/play.component
"
;
import
{
LessonTitleConfigComponent
}
from
'
./common/lesson-title-config/lesson-title-config.component
'
;
import
{
AudioRecorderComponent
}
from
'
./common/audio-recorder/audio-recorder.component
'
;
import
{
PlayerContentWrapperComponent
}
from
'
./common/player-content-wrapper/player-content-wrapper.component
'
;
import
{
PlayerContentWrapperComponent
}
from
'
./common/player-content-wrapper/player-content-wrapper.component
'
;
/** 配置 angular i18n **/
import
{
registerLocaleData
}
from
'
@angular/common
'
;
import
zh
from
'
@angular/common/locales/zh
'
;
import
{
UploadImageWithPreviewComponent
}
from
"
./common/upload-image-with-preview/upload-image-with-preview.component
"
;
import
{
BackgroundImagePipe
}
from
"
./pipes/background-image.pipe
"
;
registerLocaleData
(
zh
);
@
NgModule
({
...
...
@@ -26,15 +30,19 @@ registerLocaleData(zh);
PlayComponent
,
LessonTitleConfigComponent
,
AudioRecorderComponent
,
UploadImageWithPreviewComponent
,
BackgroundImagePipe
,
PlayerContentWrapperComponent
],
imports
:
[
imports
:
[
FormsModule
,
HttpClientModule
,
BrowserAnimationsModule
,
BrowserModule
,
Angular2FontawesomeModule
,
NgZorroAntdModule
NgZorroAntdModule
,
],
/** 配置 ng-zorro-antd 国际化(文案 及 日期) **/
providers
:
[
...
...
src/app/common/upload-image-with-preview/upload-image-with-preview.component.html
0 → 100644
View file @
d8b62a10
<div
class=
"position-relative"
>
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
disableUpload
"
[
nzShowUploadList
]="
false
"
nzAccept =
"image/*"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
>
<!--[nzBeforeUpload]="customUpload">-->
<div
class=
"p-box d-flex align-items-center"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!picUrl && !uploading"
>
<i
nz-icon
type=
"cloud-upload"
theme=
"outline"
[
style
.
font-size
]="
iconSize
+
'
em
'"
></i>
<div
class=
"m-3"
></div>
<span>
{{TIP}}
</span>
<!--<div class="mt-5 p-progress-bar" *ngIf="uploading">-->
<!--<div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>-->
<!--<div class="p-progress-value">{{progress}}%</div>-->
<!--</div>-->
</div>
<div
class=
"p-upload-progress-bg"
*
ngIf=
"uploading"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<fa
name=
"cloud-upload"
></fa>
Uploading...
</div>
</div>
<div
class=
"p-preview"
*
ngIf=
"!uploading && picUrl "
[
style
.
background-image
]="
picUrl
|
backgroundImage
"
>
</div>
</div>
</nz-upload>
<div
class=
"p-btn-delete"
*
ngIf=
"canDelete"
nz-popconfirm
nzTitle=
"Are you sure ?"
(
nzOnConfirm
)="
onDelete
()"
>
<i
nz-icon
type=
"close"
theme=
"outline"
></i>
</div>
</div>
src/app/common/upload-image-with-preview/upload-image-with-preview.component.scss
0 → 100644
View file @
d8b62a10
@import
'../../style/common_mixin'
;
.p-image-uploader
{
position
:
relative
;
display
:
block
;
width
:
100%
;
height
:
0
;
padding-bottom
:
56
.25%
;
.p-box
{
position
:
absolute
;
left
:
0
;
top
:
0
;
right
:
0
;
bottom
:
0
;
border
:
2px
dashed
#ddd
;
border-radius
:
0
.5rem
;
background-color
:
#fafafa
;
text-align
:
center
;
color
:
#aaa
;
.p-upload-icon
{
text-align
:
center
;
margin
:
auto
;
.anticon-upload
{
color
:
#888
;
font-size
:
5rem
;
}
.p-progress-bar
{
position
:
relative
;
width
:
20rem
;
height
:
1
.5rem
;
border
:
1px
solid
#ccc
;
border-radius
:
1rem
;
.p-progress-bg
{
background-color
:
#1890ff
;
border-radius
:
1rem
;
height
:
100%
;
}
.p-progress-value
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
text-shadow
:
0
0
4px
#000
;
color
:
white
;
text-align
:
center
;
font-size
:
0
.9rem
;
line-height
:
1
.5rem
;
}
}
}
.p-preview
{
width
:
100%
;
height
:
100%
;
//background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
@include
k-img-bg
();
}
}
}
.p-btn-delete
{
position
:
absolute
;
right
:
-0
.5rem
;
top
:
-0
.5rem
;
width
:
2rem
;
height
:
2rem
;
border
:
0
.2rem
solid
white
;
border-radius
:
50%
;
font-size
:
1
.2rem
;
background-color
:
#fb781a
;
color
:
white
;
text-align
:
center
;
}
.p-upload-progress-bg
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
&
.i-text
{
position
:
absolute
;
text-align
:
center
;
color
:
white
;
text-shadow
:
0
0
2px
rgba
(
0
,
0
,
0
,
.85
);
}
&
.i-bg
{
position
:
absolute
;
left
:
0
;
top
:
0
;
height
:
100%
;
background-color
:
#27b43f
;
border-radius
:
0
.5rem
;
}
}
:host
::ng-deep
.ant-upload
{
display
:
block
;
}
src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts
0 → 100644
View file @
d8b62a10
import
{
Component
,
EventEmitter
,
Input
,
OnChanges
,
OnDestroy
,
Output
}
from
'
@angular/core
'
;
import
{
NzMessageService
,
UploadXHRArgs
,
UploadFile
}
from
'
ng-zorro-antd
'
;
@
Component
({
selector
:
'
app-upload-image-with-preview
'
,
templateUrl
:
'
./upload-image-with-preview.component.html
'
,
styleUrls
:
[
'
./upload-image-with-preview.component.scss
'
]
})
export
class
UploadImageWithPreviewComponent
implements
OnDestroy
,
OnChanges
{
uploading
=
false
;
progress
=
0
;
@
Input
()
picUrl
;
@
Input
()
canDelete
=
false
;
@
Output
()
imageUploaded
=
new
EventEmitter
();
@
Output
()
imageUploadFailure
=
new
EventEmitter
();
@
Output
()
delete
=
new
EventEmitter
();
@
Input
()
picItem
=
null
;
@
Input
()
iconSize
=
2
;
@
Input
()
TIP
=
'
Click here to upload image
'
;
@
Input
()
disableUpload
=
false
;
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
constructor
(
private
nzMessageService
:
NzMessageService
)
{
}
ngOnChanges
()
{
if
(
!
this
.
picItem
)
{
return
;
}
}
handleChange
(
info
:
{
type
:
string
,
file
:
UploadFile
,
event
:
any
}):
void
{
console
.
log
(
'
info:
'
,
info
);
switch
(
info
.
type
)
{
case
'
start
'
:
// this.isUploading = true;
// this.progress = 0;
this
.
picUrl
=
null
;
// this.beforeUpload(item.file as any);
if
(
!
this
.
checkSelectFile
(
info
.
file
))
{
return
;
}
this
.
uploading
=
true
;
this
.
progress
=
0
;
break
;
case
'
success
'
:
// this.isUploading = false;
// this.uploadSuccess(info.file.response);
// this.audioUploaded.emit(info.file.response);
this
.
uploadSuccess
(
info
.
file
);
break
;
case
'
progress
'
:
this
.
progress
=
parseInt
(
info
.
event
.
percent
,
10
);
this
.
doProgress
(
this
.
progress
);
break
;
}
}
onDelete
()
{
this
.
delete
.
emit
();
}
checkSelectFile
(
file
)
{
const
isImg
=
[
'
image/jpeg
'
,
'
image/png
'
,
'
image/jpeg
'
,
'
image/gif
'
,
'
image/bmp
'
].
includes
(
file
.
type
);
if
(
!
isImg
)
{
this
.
nzMessageService
.
error
(
'
You can only upload Image file (jpg|gif|png|bmp)
'
);
return
false
;
}
const
isGif
=
!
[
'
image/jpeg
'
,
'
image/png
'
,
'
image/jpeg
'
,
'
image/bmp
'
].
includes
(
file
.
type
);
const
delta
=
isGif
?
20
:
5
;
const
isOverSize
=
file
.
size
/
1024
/
1024
<
delta
;
if
(
!
isOverSize
)
{
this
.
nzMessageService
.
error
(
`
${
isGif
?
'
Gif
'
:
'
Image
'
}
must smaller than
${
delta
}
MB!`
);
return
false
;
}
return
true
;
}
uploadSuccess
=
(
file
)
=>
{
this
.
nzMessageService
.
info
(
'
Upload Success
'
);
this
.
uploading
=
false
;
this
.
picUrl
=
file
.
response
.
url
;
// this.uploadFinished(url);
// if (!inOSS) {
const
img
=
new
Image
();
img
.
addEventListener
(
'
load
'
,
()
=>
{
const
height
=
img
.
naturalHeight
;
const
width
=
img
.
naturalWidth
;
file
[
'
height
'
]
=
height
;
file
[
'
width
'
]
=
width
;
img
.
remove
();
this
.
imageUploaded
.
emit
(
file
.
response
);
// this.resService.updateImage(id, {width, height}).then( () => {
// this.imageUploaded.emit({res_id: id, id, name, hash, url});
// });
});
img
.
src
=
file
.
response
.
url
;
// } else {
// this.imageUploaded.emit({res_id: id, id, name, hash, url});
// }
}
uploadFailure
=
(
err
,
file
)
=>
{
this
.
uploading
=
false
;
if
(
err
.
name
&&
err
.
name
===
'
cancel
'
)
{
return
;
}
console
.
log
(
err
);
this
.
nzMessageService
.
error
(
'
Upload Error
'
+
err
.
message
);
this
.
imageUploadFailure
.
emit
(
file
);
}
doProgress
=
function
(
p
)
{
if
(
p
>
1
)
{
p
=
1
;
}
if
(
p
<
0
)
{
p
=
0
;
}
// console.log(Math.floor(p * 100));
this
.
progress
=
Math
.
floor
(
p
*
100
);
}
ngOnDestroy
()
{
}
}
src/app/pipes/background-image.pipe.ts
0 → 100644
View file @
d8b62a10
import
{
Pipe
,
PipeTransform
}
from
'
@angular/core
'
;
// import {ElectronUtil} from '../util/ElectronUtil';
declare
const
APP_PATH
;
// const isInElectron = localStorage.getItem('electron');
@
Pipe
({
name
:
'
backgroundImage
'
})
export
class
BackgroundImagePipe
implements
PipeTransform
{
transform
(
value
:
any
,
coursewareSid
?:
string
)
{
// const ret = value ? `url(${value})` : '';
const
ret
=
value
?
`url(
${
value
}
)`
:
''
;
return
ret
;
// let ret = value > 0 ? `url(/api/media-resource/${value}/file)` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
// ret = `url(file://${APP_PATH}/courseware_cache/${coursewareSid}/${value})`;
// }
// return ret;
}
}
src/index.html
View file @
d8b62a10
...
...
@@ -33,7 +33,7 @@
}
});
},
setData
:
function
(
data
,
callback
){
setData
:
function
(
data
,
callback
){
let
str
=
JSON
.
stringify
(
data
);
net
.
getData
(
"
setCoursewareData
"
,{
id
:
id
,
data
:
str
},
function
(
res
){
if
(
res
){
...
...
@@ -58,7 +58,7 @@
}
else
{
return
{
getData
:
function
(
callback
){
let
data
=
localStorage
.
getItem
(
"
courseware_data
"
);
let
data
=
localStorage
.
getItem
(
"
courseware_data
"
);
if
(
data
){
data
=
JSON
.
parse
(
data
);
}
...
...
@@ -70,10 +70,10 @@
callback
&&
callback
();
},
uploadUrl
:
function
(){
return
""
;
return
'
http://localhost:3000/api/test
'
;
},
uploadData
:
function
(){
return
""
;
return
{}
;
}
}
}
...
...
tslint.json
View file @
d8b62a10
...
...
@@ -62,6 +62,9 @@
"no-switch-case-fall-through"
:
true
,
"no-use-before-declare"
:
true
,
"no-var-requires"
:
false
,
"no-shadowed-variable"
:
false
,
"object-literal-key-quotes"
:
[
true
,
"as-needed"
...
...
@@ -84,9 +87,11 @@
"template-banana-in-box"
:
true
,
"template-no-negated-async"
:
true
,
"use-lifecycle-interface"
:
true
,
"use-pipe-transform-interface"
:
true
"use-pipe-transform-interface"
:
true
,
"no-trailing-whitespace"
:
false
,
"variable-name"
:
false
},
"rulesDirectory"
:
[
"codelyzer"
]
}
\ No newline at end of file
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment