1.利用FormData提交文件、圖片
案例：上傳圖片骂维、文件（不依賴后臺接口）
解決方法：（核心代碼）
1惹资、文件上傳
- html部分：
<FormItem
label="JSON格式配置數(shù)據(jù)："
>
<input ref="file" type="file" style={{display: 'none'}} onChange={ e => this.setState({file: e.target.files[0]}) }/>
<Button type="ghost" onClick={ () => {
this.refs.file.click();
}}>
<Icon type="upload" /> 點擊上傳
</Button>
<span style={{marginLeft: 15}}>{file && file.name}</span>
</FormItem>
- js部分
const formData = new FormData();
formData.append('file', this.state.file);
2、圖片上傳
- html部分
<FormItem
label="圖片上傳："
>
<div className="icon-config-pic-card">
{!fileUrl && <Input type="file" onChange={e => this.fileChange(e.target.files[0])}/>}
{
fileUrl &&
<div style={{position: 'relative', height: '100%'}}>
<img src={fileUrl} style={{ width: '100%', height: '100%', display: 'block'}}/>
<div style={{position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(0,0,0,0.5)', color: '#fff', textAlign: 'left' }}>
<div onClick={this.showModal}>預(yù)覽</div>
{type !== 'check' && <div onClick={this.clear} style={{padding: '0 10px', float: 'right'}}>刪除</div>}
</div>
</div>
}
<Icon type="plus" style={{fontSize: '28px', marginTop: 20}}/>
<div style={{color: '#999'}}>上傳圖片</div>
</div>
</FormItem>
- css部分
.icon-config-pic-card{
border: 1px dashed #d9d9d9;
width: 96px;
height: 96px;
border-radius: 4px;
background-color: #fbfbfb;
text-align: center;
cursor: pointer;
-webkit-transition: border-color 0.3s ease;
transition: border-color 0.3s ease;
display: inline-block;
vertical-align: top;
margin-right: 8px;
margin-bottom: 8px;
overflow: hidden;
// padding:20px;
&:hover{
border-color: #108ee9;
}
& .ant-input{
height: 100%;
width: 100%;
margin-bottom: -100%;
opacity: 0;
cursor: pointer;
}
}
- js部分
const createURL = input => {
return window.URL.createObjectURL && window.URL.createObjectURL(input) || input;
};
const revokeURL = url => {
if (window.URL.revokeObjectURL) {
window.URL.revokeObjectURL(url);
}
};
fileChange = (e) => {
const file = e;
this.setState({
fileUrl: (typeof file === 'string') ? file : createURL(file),
});
}
clear = () => {
revokeURL(this.state.fileUrl);
}
提交：
const formData = new FormData();
formData.append('FILTER_LOGO', values.file)
2. 文本復(fù)制
案例：實現(xiàn)某文本的復(fù)制航闺，可以通過control + v獲取褪测。
解決方法：（核心代碼）
- js部分
copyLink = (j) => {
this.refs.hide2.value = j;
this.refs.hide2.select();
document.execCommand('Copy'); // 執(zhí)行瀏覽器復(fù)制命令
message.success('復(fù)制成功');
}
- html部分
<Button type="primary" size="small" onClick={this.copyLink.bind(this, j)}>復(fù)制</Button>
<input type="text" ref="hide2" style={{ width: 0.2, border: 'none', height: 0.2 }}/>
3.頁面加載回滾到頂部
案例：頁面過長，在通過路由跳轉(zhuǎn)時會保留原來瀏覽位置潦刃，對使用者不友好侮措。
解決方法：（核心代碼）
- js部分
// 頁面加載時回到頂部
window.onhashchange = () => {
document.body.scrollTop = document.documentElement.scrollTop = 0;
};
注：參考原文（https://github.com/Ydgent/study/blob/master/question/js.md）
