feature: add avatar component
This commit is contained in:
Sagi
parent
d628e0aaeb
commit
cdf6f35522
|
|
@ -0,0 +1,308 @@
|
|||
import { Component, OnInit, ViewChildren, ElementRef, Input, Output, EventEmitter, HostListener, ViewChild, forwardRef } from '@angular/core';
|
||||
import { Observable, Subject } from 'rxjs';
|
||||
import { NotifyService } from '@farris/ui-notify';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { LocaleService } from '@farris/ui-locale';
|
||||
|
||||
export interface upImageFile {
|
||||
size: number;
|
||||
name: string;
|
||||
type: string;
|
||||
lastModified?: string;
|
||||
lastModifiedDate?: Date;
|
||||
state?: string;
|
||||
base64?: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'farris-avatar',
|
||||
templateUrl: './avatar.component.html',
|
||||
styleUrls: ['./avatar.component.scss'],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => AvatarComponent),
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class AvatarComponent implements ControlValueAccessor, OnInit {
|
||||
private defaultImgSrc = 'data:image/jpeg;base64,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'
|
||||
private errorImgSrc = 'data:image/jpeg;base64,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';
|
||||
public imgSrc;
|
||||
// public fileBinary: string;
|
||||
@ViewChild('file') file: ElementRef;
|
||||
// @Input() cover = '';
|
||||
tReadOnly: boolean = false;
|
||||
@Input()
|
||||
set readonly(value: boolean) {
|
||||
if (value !== this.tReadOnly) {
|
||||
let localeTitle = this.localeService.getValue('avatar.imgtitle');
|
||||
this.imgtitle = value ? '' : (this.imgTitle ? this.imgTitle : localeTitle);
|
||||
this.tReadOnly = value;
|
||||
}
|
||||
|
||||
};
|
||||
get readonly(): boolean {
|
||||
return this.tReadOnly;
|
||||
}
|
||||
// @Input() type;
|
||||
@Input() size: number = 1;
|
||||
@Input() imgTitle: string;
|
||||
@Input() avatarWidth: number = 100;
|
||||
@Input() avatarHeight: number = 100;
|
||||
@Input() imgShape: string = 'circle';
|
||||
imgtitle: string = '点击修改';
|
||||
// @Input() isBase64:boolean = true;
|
||||
@Output('imgChange') imgChange = new EventEmitter();
|
||||
|
||||
_type;
|
||||
@Input()
|
||||
set type(val) {
|
||||
if (val && val.length) {
|
||||
let types = val;
|
||||
if (typeof val === 'string') {
|
||||
types = val.split(',');
|
||||
}
|
||||
if (types && types.length) {
|
||||
this.currentImgType = [];
|
||||
types.forEach(t => {
|
||||
if ((typeof t == 'string') && t.constructor == String) {
|
||||
let tImgtype = 'image/' + t;
|
||||
if (t === 'jpg') {
|
||||
let jpgType = 'image/jpeg';
|
||||
this.currentImgType.push(jpgType);
|
||||
}
|
||||
this.currentImgType.push(tImgtype);
|
||||
}
|
||||
});
|
||||
if (this.currentImgType.length > 0) {
|
||||
this.imgType = this.currentImgType.join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
get type() {
|
||||
return this._type;
|
||||
}
|
||||
_cover;
|
||||
@Input()
|
||||
set cover(val) {
|
||||
if (val) {
|
||||
this._cover = val;
|
||||
this.imgsrcInit(this.cover);
|
||||
}
|
||||
else {
|
||||
this.imgSrc = this.defaultImgSrc;
|
||||
}
|
||||
}
|
||||
get cover() {
|
||||
return this._cover;
|
||||
}
|
||||
|
||||
private onChangeCallback: Function = () => { }
|
||||
private onTouchedCallback: Function = () => { }
|
||||
//是否加载中
|
||||
loadingImg: boolean;
|
||||
imgType = 'image/*';
|
||||
imgFileObj: upImageFile;
|
||||
currentImgType = ['image/image', 'image/webp', 'image/png', 'image/svg', 'image/gif', 'image/jpg', 'image/jpeg', 'image/bmp'];
|
||||
constructor(private notifyService: NotifyService, public localeService: LocaleService) {
|
||||
this.notifyService.config.position = 'top-center';
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// if(this.cover){
|
||||
// this.imgsrcInit(this.cover);
|
||||
// }
|
||||
// else{
|
||||
// this.imgSrc = this.defaultImgSrc;
|
||||
// }
|
||||
if (this.readonly) {
|
||||
this.imgtitle = '';
|
||||
}
|
||||
else if (this.imgTitle) {
|
||||
this.imgtitle = this.imgTitle;
|
||||
}
|
||||
else {
|
||||
this.imgtitle = this.localeService.getValue('avatar.imgtitle');
|
||||
}
|
||||
}
|
||||
/*判断cover数据格式，做出修改赋值给imgSrc
|
||||
*/
|
||||
imgsrcInit(val) {
|
||||
let isImg = this.isSrc(val);
|
||||
if (isImg) {
|
||||
this.imgSrc = val;
|
||||
}
|
||||
else {
|
||||
let isFullBase64 = this.isBaseSrc(val);
|
||||
if (isFullBase64) {
|
||||
this.imgSrc = val
|
||||
}
|
||||
else {
|
||||
this.imgSrc = this.addBase64(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('click')
|
||||
onClick(): void {
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
(this.file.nativeElement as HTMLInputElement).click();
|
||||
}
|
||||
|
||||
getfiledata(event) {
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
const filetarget = event.target as HTMLInputElement;
|
||||
let getfile = filetarget.files;
|
||||
if (!getfile[0]) {
|
||||
return;
|
||||
}
|
||||
let fileType = getfile[0].type;
|
||||
const isLtSize = getfile[0].size / 1024 / 1024 < this.size;
|
||||
if (this.currentImgType.indexOf(fileType) < 0) {
|
||||
let typeerrorText = this.localeService.getValue('avatar.typeError');
|
||||
this.notifyService.error({
|
||||
type: 'error',
|
||||
title: '',
|
||||
msg: typeerrorText
|
||||
});
|
||||
filetarget.value = '';
|
||||
// this.notifyService.error('上传图片类型不正确');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isLtSize) {
|
||||
let sizeerrorText = this.localeService.getValue('avatar.sizeError');
|
||||
let errormes: string = sizeerrorText + this.size + "M!";
|
||||
this.notifyService.error({
|
||||
type: 'error',
|
||||
title: '',
|
||||
msg: errormes
|
||||
});
|
||||
filetarget.value = '';
|
||||
// this.notifyService.error(`上传图片不能大于${this.size}M!`);
|
||||
return;
|
||||
}
|
||||
this.transformFile(getfile[0]);
|
||||
filetarget.value = '';
|
||||
}
|
||||
|
||||
public getImgFileObj() {
|
||||
return this.imgFileObj;
|
||||
}
|
||||
|
||||
transformFile(getfile: any) {
|
||||
// const subject = new Subject();
|
||||
this.imgFileObj = {
|
||||
size: getfile.size,
|
||||
name: getfile.name,
|
||||
type: getfile.type,
|
||||
lastModified: getfile.lastModified,
|
||||
lastModifiedDate: getfile.lastModifiedDate
|
||||
}
|
||||
this.do(getfile).subscribe(res => {
|
||||
this.loadingImg = false;
|
||||
if (res['state'] === 'done') {
|
||||
this.imgSrc = res['result'];
|
||||
|
||||
//this.onChangeCallback(this.imgSrc);
|
||||
this.onChangeCallback(this.removeBase64(this.imgSrc));
|
||||
this.onTouchedCallback();
|
||||
}
|
||||
else if (res['state'] === 'error') {
|
||||
let uploaderrorText = this.localeService.getValue('avatar.uploadError');
|
||||
this.notifyService.error({
|
||||
type: 'error',
|
||||
title: '',
|
||||
msg: uploaderrorText
|
||||
})
|
||||
// this.notifyService.error('图片上传失败，请重试!');
|
||||
}
|
||||
this.imgFileObj.state = res['state'];
|
||||
this.imgFileObj.base64 = res['result'];
|
||||
this.imgChange.emit(this.imgFileObj);
|
||||
});
|
||||
}
|
||||
|
||||
read(file: File): Observable<string> {
|
||||
return Observable.create(observer => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
//this.loadingImg = true;
|
||||
// reader.onloadstart=function(){}
|
||||
reader.onload = () => {
|
||||
//console.log(reader.result);
|
||||
observer.next({ state: 'done', 'result': reader.result });
|
||||
observer.complete();
|
||||
};
|
||||
reader.onerror = function () {
|
||||
observer.next({ state: 'error', 'result': reader.result });
|
||||
observer.complete();
|
||||
}
|
||||
});
|
||||
}
|
||||
do(file: any): Observable<string> {
|
||||
return this.read(file as File);
|
||||
}
|
||||
|
||||
writeValue(val: any): void {
|
||||
if (val && val.length) {
|
||||
// if(this.isBase64){
|
||||
// this.imgSrc = this.addBase64(val);
|
||||
// }
|
||||
// else{
|
||||
// this.imgSrc = val;
|
||||
// }
|
||||
this.imgsrcInit(val);
|
||||
}
|
||||
else if (this.cover) {
|
||||
this.imgsrcInit(this.cover);
|
||||
}
|
||||
else {
|
||||
this.imgSrc = this.defaultImgSrc;
|
||||
}
|
||||
}
|
||||
registerOnChange(fn: any): void {
|
||||
this.onChangeCallback = fn;
|
||||
}
|
||||
registerOnTouched(fn: any): void {
|
||||
this.onTouchedCallback = fn;
|
||||
}
|
||||
// setDisabledState?(isDisabled: boolean): void {
|
||||
// this.disabled = isDisabled;
|
||||
// }
|
||||
|
||||
addBase64(val) {
|
||||
if (!val) return;
|
||||
return 'data:image/jpeg;base64,' + val;
|
||||
}
|
||||
|
||||
removeBase64(val) {
|
||||
if (!val) return;
|
||||
let img_arr = val.split(',');
|
||||
if (img_arr.length) {
|
||||
return img_arr[1];
|
||||
}
|
||||
|
||||
}
|
||||
//判断是否是图片路径
|
||||
isSrc(url) {
|
||||
return (url.match(/\.(jpeg|jpg|gif|png|svg|bmp|webp)$/) != null)
|
||||
}
|
||||
//判断是否是完成base64
|
||||
isBaseSrc(url) {
|
||||
return (url.indexOf('data:image/') > -1 ? true : false)
|
||||
}
|
||||
|
||||
errorSrc() {
|
||||
this.imgSrc = this.errorImgSrc;
|
||||
this.imgtitle = this.localeService.getValue('avatar.loadError');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { defineComponent, computed, ref, SetupContext } from 'vue';
|
||||
import { avatarProps, AvatarProps } from './avatar.props';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Avatar',
|
||||
props: avatarProps,
|
||||
emits: ['change'],
|
||||
setup(props: AvatarProps, context: SetupContext) {
|
||||
const avatarClass = computed(() => ({
|
||||
'f-avatar': true,
|
||||
'f-avatar-readonly': props.readonly,
|
||||
'f-avatar-circle': props.shape === 'circle',
|
||||
'f-avatar-square': props.shape === 'square',
|
||||
}));
|
||||
|
||||
const avatarStyle = computed(() => ({
|
||||
width: props.avatarWidth + 'px',
|
||||
height: props.avatarHeight + 'px',
|
||||
}));
|
||||
|
||||
let showLoading = false;
|
||||
let imgSrc = '';
|
||||
|
||||
const currentImgType = ['image/image', 'image/webp', 'image/png', 'image/svg', 'image/gif', 'image/jpg', 'image/jpeg', 'image/bmp'];
|
||||
|
||||
function errorSrc() {
|
||||
return '';
|
||||
}
|
||||
|
||||
function getfiledata() {}
|
||||
|
||||
const defaultImgSrc =
|
||||
'data:image/jpeg;base64,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';
|
||||
const errorImgSrc =
|
||||
'data:image/jpeg;base64,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';
|
||||
|
||||
const imageType = computed(() => props.type.join());
|
||||
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div class={avatarClass.value} style={avatarStyle.value}>
|
||||
{showLoading && (
|
||||
<div class="f-avatar-upload-loading">
|
||||
<div class="loading-inner">加载中</div>
|
||||
</div>
|
||||
)}
|
||||
<img title={props.tile} class="f-avatar-image" src={imgSrc} onError={errorSrc()} />
|
||||
{!props.readonly && (
|
||||
<div class="f-avatar-icon">
|
||||
<span class="f-icon f-icon-camera"></span>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
name="file-input"
|
||||
type="file"
|
||||
class="f-avatar-upload"
|
||||
accept={imageType.value}
|
||||
onChange={getfiledata}
|
||||
style="display: none;"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { ExtractPropTypes, PropType } from 'vue';
|
||||
|
||||
type AvatarShap = 'square' | 'circle';
|
||||
|
||||
export const avatarProps = {
|
||||
/**
|
||||
* 头像宽度
|
||||
*/
|
||||
avatarWidth: { type: Number, default: 100 },
|
||||
/**
|
||||
* 头像高度
|
||||
*/
|
||||
avatarHeight: { type: Number, default: 100 },
|
||||
/**
|
||||
* 组件标识
|
||||
*/
|
||||
cover: { type: String },
|
||||
/**
|
||||
* 只读
|
||||
*/
|
||||
readonly: { type: Boolean, default: false },
|
||||
/**
|
||||
* 头像形状
|
||||
*/
|
||||
shape: { type: String as PropType<AvatarShap>, default: 'circle' },
|
||||
/**
|
||||
* 头像最大尺寸, 单位MB
|
||||
*/
|
||||
maxSize: { type: Number, default: 1 },
|
||||
/**
|
||||
* 头像标题
|
||||
*/
|
||||
tile: { type: String, default: '' },
|
||||
/**
|
||||
* 支持的头像类型
|
||||
*/
|
||||
type: { type: Array<string>, default: [] },
|
||||
};
|
||||
|
||||
export type AvatarProps = ExtractPropTypes<typeof avatarProps>;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { ComputedRef } from 'vue';
|
||||
|
||||
export interface UseImage {
|
||||
acceptTypes: ComputedRef<string>;
|
||||
|
||||
imageSrc: ComputedRef<string>;
|
||||
|
||||
imageTitle: ComputedRef<string>;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import { SetupContext } from 'vue';
|
||||
import { AvatarProps } from '../avatar.props';
|
||||
|
||||
export function useFile(props: AvatarProps, context: SetupContext, allowTypes: string[]) {
|
||||
function getFileData($event: Event) {
|
||||
if (props.readonly) {
|
||||
return;
|
||||
}
|
||||
const fileInput = $event.target as HTMLInputElement;
|
||||
const selectedFiles = fileInput.files;
|
||||
if (!selectedFiles || !selectedFiles[0]) {
|
||||
return;
|
||||
}
|
||||
const fileType = selectedFiles[0].type;
|
||||
const isLtSize = selectedFiles[0].size / 1024 / 1024 < props.maxSize;
|
||||
if (allowTypes.indexOf(fileType) < 0) {
|
||||
const typeErrorMessage = this.localeService.getValue('avatar.typeError');
|
||||
this.notifyService.error({
|
||||
type: 'error',
|
||||
title: '',
|
||||
msg: typeErrorMessage,
|
||||
});
|
||||
fileInput.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isLtSize) {
|
||||
const sizeErrorMessageTemplate = this.localeService.getValue('avatar.sizeError');
|
||||
const sizeErrorMessage: string = sizeErrorMessageTemplate + props.maxSize + 'MB!';
|
||||
this.notifyService.error({
|
||||
type: 'error',
|
||||
title: '',
|
||||
msg: sizeErrorMessage,
|
||||
});
|
||||
fileInput.value = '';
|
||||
return;
|
||||
}
|
||||
this.transformFile(selectedFiles[0]);
|
||||
fileInput.value = '';
|
||||
}
|
||||
|
||||
transformFile(getfile: any) {
|
||||
// const subject = new Subject();
|
||||
this.imgFileObj = {
|
||||
size: getfile.size,
|
||||
name: getfile.name,
|
||||
type: getfile.type,
|
||||
lastModified: getfile.lastModified,
|
||||
lastModifiedDate: getfile.lastModifiedDate
|
||||
}
|
||||
this.do(getfile).subscribe(res => {
|
||||
this.loadingImg = false;
|
||||
if (res['state'] === 'done') {
|
||||
this.imgSrc = res['result'];
|
||||
|
||||
//this.onChangeCallback(this.imgSrc);
|
||||
this.onChangeCallback(this.removeBase64(this.imgSrc));
|
||||
this.onTouchedCallback();
|
||||
}
|
||||
else if (res['state'] === 'error') {
|
||||
let uploaderrorText = this.localeService.getValue('avatar.uploadError');
|
||||
this.notifyService.error({
|
||||
type: 'error',
|
||||
title: '',
|
||||
msg: uploaderrorText
|
||||
})
|
||||
// this.notifyService.error('图片上传失败，请重试!');
|
||||
}
|
||||
this.imgFileObj.state = res['state'];
|
||||
this.imgFileObj.base64 = res['result'];
|
||||
this.imgChange.emit(this.imgFileObj);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import { computed, SetupContext } from 'vue';
|
||||
import { AvatarProps } from '../avatar.props';
|
||||
import { UseImage } from './types';
|
||||
|
||||
export function useImage(props: AvatarProps, context: SetupContext): UseImage {
|
||||
const defaultImage = '';
|
||||
const errorImage = '';
|
||||
|
||||
// 判断是否是图片路径
|
||||
function isUrl(url: string) {
|
||||
return url.match(/\.(jpeg|jpg|gif|png|svg|bmp|webp)$/) != null;
|
||||
}
|
||||
|
||||
// 判断是否是完成base64
|
||||
function isBase64Image(url: string) {
|
||||
return url.indexOf('data:image/') > -1;
|
||||
}
|
||||
|
||||
function appendBase64ImageHeader(val) {
|
||||
if (!val) {
|
||||
return '';
|
||||
}
|
||||
return 'data:image/jpeg;base64,' + val;
|
||||
}
|
||||
|
||||
const acceptTypes = computed(() => {
|
||||
if (!props.type || !props.type.length) {
|
||||
return '';
|
||||
}
|
||||
const imageTypesArray = props.type.map((fileType: string) => {
|
||||
if (fileType === 'jpg') {
|
||||
fileType = 'jpeg';
|
||||
}
|
||||
return `image/${fileType}`;
|
||||
});
|
||||
if (!imageTypesArray || !imageTypesArray.length) {
|
||||
return 'image/*';
|
||||
}
|
||||
return imageTypesArray.join(',');
|
||||
});
|
||||
|
||||
const imageSrc = computed(() => {
|
||||
if (!props.cover) {
|
||||
return defaultImage;
|
||||
}
|
||||
if (isUrl(props.cover)) {
|
||||
return props.cover;
|
||||
}
|
||||
if (isBase64Image(props.cover)) {
|
||||
return props.cover;
|
||||
}
|
||||
return appendBase64ImageHeader(props.cover);
|
||||
});
|
||||
|
||||
const imageTitle = computed(() => {
|
||||
return props.readonly ? '' : props.tile;
|
||||
});
|
||||
|
||||
return { acceptTypes, imageSrc, imageTitle };
|
||||
}
|
||||
Loading…
Reference in New Issue