You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.9 KiB
61 lines
1.9 KiB
import React, {RefObject} from "react";
|
|
import {Form, Image} from "react-bootstrap";
|
|
import path from "path";
|
|
|
|
/**
|
|
* 上传图片
|
|
*/
|
|
export class UploadImg extends React.Component<
|
|
{
|
|
//文件对象
|
|
fileImg:RefObject<any>;
|
|
//图片尺寸限制
|
|
maxImageSize:{
|
|
width:number,
|
|
height:number
|
|
};
|
|
//上传事件
|
|
onChange:Function;
|
|
//图片文件名
|
|
imageName:string;
|
|
}, any>{
|
|
|
|
/**
|
|
* 获取图片url
|
|
*/
|
|
getUrl(){
|
|
if(this.props.fileImg.current!==null&&this.props.fileImg.current.files.length>0) {
|
|
return URL.createObjectURL(this.props.fileImg.current.files[0])
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
{/*
|
|
预览背景图
|
|
*/}
|
|
<Image className="mt-3 d-none" src={this.getUrl()} onLoad={(s)=> {
|
|
if(s.target instanceof HTMLImageElement){
|
|
//限制图片显示大小
|
|
s.target.width=s.target.width>this.props.maxImageSize.width?this.props.maxImageSize.width:s.target.width
|
|
s.target.height=s.target.height>this.props.maxImageSize.height?this.props.maxImageSize.height:s.target.height
|
|
s.target.classList.remove('d-none')
|
|
}
|
|
}
|
|
}/>
|
|
|
|
{/*上传背景图*/}
|
|
<div className="col-7 ml-auto mr-auto mt-3">
|
|
<Form.File
|
|
ref={this.props.fileImg}
|
|
label={path.basename(this.props.imageName.replace(/\\/g,'/'))}
|
|
custom
|
|
accept="image/*"
|
|
onChange={(e:any)=>this.props.onChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|