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.
71 lines
2.2 KiB
71 lines
2.2 KiB
import React from "react";
|
|
import {Form, Image} from "react-bootstrap";
|
|
import path from "path";
|
|
|
|
/**
|
|
* 上传图片
|
|
*/
|
|
export class UploadImg extends React.Component<
|
|
{
|
|
//tip
|
|
tip:string,
|
|
//图片尺寸限制
|
|
maxImageSize:{
|
|
width:number,
|
|
height:number
|
|
};
|
|
//上传事件
|
|
onChange:Function;
|
|
}, {
|
|
//imgObj
|
|
imgObj?:any;
|
|
//图片文件名
|
|
imageName?:string;
|
|
}>{
|
|
|
|
|
|
constructor(props: Readonly<{ tip: string; maxImageSize: { width: number; height: number }; onChange: Function }>) {
|
|
super(props);
|
|
|
|
this.state={}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
{/*
|
|
预览背景图
|
|
*/}
|
|
<Image className="mt-3 d-none" src={this.state.imgObj} 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
|
|
label={this.state.imageName?path.basename(this.state.imageName.replace(/\\/g,'/')):this.props.tip}
|
|
custom
|
|
accept="image/*"
|
|
onChange={(e:any)=>{
|
|
const file=e.target.files[0]
|
|
if(!file){
|
|
return
|
|
}
|
|
this.setState({
|
|
imgObj:URL.createObjectURL(file),
|
|
imageName:e.target.value
|
|
})
|
|
this.props.onChange(file)
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|