Commit d8b62a10 authored by limingzhe's avatar limingzhe

add upload-image-width-preview

parent 751801a3
import { Component ,OnInit} from '@angular/core'; import { Component , OnInit} from '@angular/core';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
...@@ -6,11 +6,11 @@ import { Component ,OnInit} from '@angular/core'; ...@@ -6,11 +6,11 @@ import { Component ,OnInit} from '@angular/core';
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent implements OnInit{ export class AppComponent implements OnInit{
type = 'play'; type = 'play';
constructor() { constructor() {
let tp = this.getQueryString("type"); let tp = this.getQueryString("type");
if(tp){ if (tp){
this.type = tp; this.type = tp;
} }
} }
......
...@@ -3,20 +3,24 @@ import { BrowserModule } from '@angular/platform-browser'; ...@@ -3,20 +3,24 @@ import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 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 { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import {Angular2FontawesomeModule} from 'angular2-fontawesome/angular2-fontawesome'; import {Angular2FontawesomeModule} from 'angular2-fontawesome/angular2-fontawesome';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { FormComponent } from './form/form.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 { LessonTitleConfigComponent } from './common/lesson-title-config/lesson-title-config.component';
import { AudioRecorderComponent } from './common/audio-recorder/audio-recorder.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 **/ /** 配置 angular i18n **/
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh'; 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); registerLocaleData(zh);
@NgModule({ @NgModule({
...@@ -26,15 +30,19 @@ registerLocaleData(zh); ...@@ -26,15 +30,19 @@ registerLocaleData(zh);
PlayComponent, PlayComponent,
LessonTitleConfigComponent, LessonTitleConfigComponent,
AudioRecorderComponent, AudioRecorderComponent,
UploadImageWithPreviewComponent,
BackgroundImagePipe,
PlayerContentWrapperComponent PlayerContentWrapperComponent
], ],
imports: [ imports: [
FormsModule, FormsModule,
HttpClientModule, HttpClientModule,
BrowserAnimationsModule, BrowserAnimationsModule,
BrowserModule, BrowserModule,
Angular2FontawesomeModule, Angular2FontawesomeModule,
NgZorroAntdModule NgZorroAntdModule,
], ],
/** 配置 ng-zorro-antd 国际化(文案 及 日期) **/ /** 配置 ng-zorro-antd 国际化(文案 及 日期) **/
providers : [ providers : [
......
<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>
@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;
}
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() {
}
}
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;
}
}
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
} }
}); });
}, },
setData: function(data,callback){ setData: function(data,callback){
let str = JSON.stringify(data); let str = JSON.stringify(data);
net.getData("setCoursewareData",{id: id,data: str},function(res){ net.getData("setCoursewareData",{id: id,data: str},function(res){
if(res){ if(res){
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
} else { } else {
return { return {
getData: function(callback){ getData: function(callback){
let data = localStorage.getItem("courseware_data"); let data = localStorage.getItem("courseware_data");
if(data){ if(data){
data = JSON.parse(data); data = JSON.parse(data);
} }
...@@ -70,10 +70,10 @@ ...@@ -70,10 +70,10 @@
callback&&callback(); callback&&callback();
}, },
uploadUrl: function(){ uploadUrl: function(){
return ""; return 'http://localhost:3000/api/test';
}, },
uploadData: function(){ uploadData: function(){
return ""; return {};
} }
} }
} }
......
...@@ -62,6 +62,9 @@ ...@@ -62,6 +62,9 @@
"no-switch-case-fall-through": true, "no-switch-case-fall-through": true,
"no-use-before-declare": true, "no-use-before-declare": true,
"no-var-requires": false, "no-var-requires": false,
"no-shadowed-variable": false,
"object-literal-key-quotes": [ "object-literal-key-quotes": [
true, true,
"as-needed" "as-needed"
...@@ -84,9 +87,11 @@ ...@@ -84,9 +87,11 @@
"template-banana-in-box": true, "template-banana-in-box": true,
"template-no-negated-async": true, "template-no-negated-async": true,
"use-lifecycle-interface": true, "use-lifecycle-interface": true,
"use-pipe-transform-interface": true "use-pipe-transform-interface": true,
"no-trailing-whitespace": false,
"variable-name": false
}, },
"rulesDirectory": [ "rulesDirectory": [
"codelyzer" "codelyzer"
] ]
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment