公众号

关于React 的文件上传

- - 阅 55

接触React的时间并不长,所以有些坑还是浪费了很多时间的,比如基于React的文件上传。React 支持input type=file ,所以React 当然也支持任何文件上传,不过怎么获得input type=file的值?网上并没有怎么深入地讲,更多讲的是基于什么组件的文件上传,不过这些组件都是跟React以及相关周边组件的版本密切相关,在github.com上搜索了接,均不能用,没办法,百度、谷歌了很久,耽误了两天的时间,终于找到了最简单的React文件上传的办法。核心代码如下:

onstructor(props) {
super(props);
this.uploadexcel = this.uploadexcel.bind(this);
this.state = {
tablename:””,
visible: false,
isUpdate: false,
loading: true,
columns:[],
fieldslayout:[],
};
}
uploadtarget(value){
targeturl=value;
};

uploadexcel = (selectorFiles: FileList) => {
console.log(selectorFiles);
var file1=selectorFiles[0];
let formData = new FormData();
formData.append(“file”, file1);
let access_token=localStorage.getItem(“access_token”);
let catalog=localStorage.getItem(“catalog”);
var remoteurl=request.getRemoteURL()+”/”+catalog+”/excel/upload/”+targeturl;

fetch(remoteurl, {
method: ‘POST’,
mode: ‘cors’,
headers: {
‘Authorization’:access_token
},
body: formData,
}).then(function(response){
if(response.ok) {
response.json().then(function(obj) {
let code=obj.code;
if(code==200){
alert(“Excel数据上传成功!”);
queryData(this);
}else{
alert(“Excel数据上传失败!”);
}
})
}else{
alert(“Excel数据上传失败!!!”);
}
}).catch(function (error) {
alert(“后端数据服务连接异常,保存失败!”);
});

}

render(){
const { visible, isUpdate, loading} = this.state;

if(this.state.tablename==null&&this.props.match.params.tablename!=null
||this.state.tablename!=null&&this.props.match.params.tablename!=this.state.tablename){
this.state.tablename=this.props.match.params.tablename;
queryFields(this);
}

return(
<div>
<BreadcrumbCustom paths={[‘首页’,’表单’]}/>
<div className=’formBody’ ref=”mainBody”>
<form ref=”uploadForm” encType=”multipart/form-data”>
<Row gutter={24}>
<div class=’btnOpera’>
<Select defaultValue=”01″ style={{ width: 150 }} >
<Option value=”01″>分销商</Option>
<Option value=”02″>直营</Option>
</Select>
<Select defaultValue=”feixiandfgwgc” style={{ width: 220 }} onChange={this.uploadtarget}>
<Option value=”feixiandfgwgc”>家乐福</Option>
<Option value=”guohuoxtmjrr”>沃尔玛</Option>
<Option value=”likelai”>百万庄园</Option>
<Option value=”tongyi”>统一</Option>
</Select>
<input ref=”file” type=”file” name=”file” onChange={ (e) => this.uploadexcel(e.target.files) }/>
<Button type=”primary” onClick={this.btnSearch_Click} >查询</Button>
</div>

</Row>
</form>
<FormTable
columns={this.state.columns}
dataSource={this.state.dataSource}
/>

</div>
</div>
)
}
}

 

 

0

本文转载 " "

原文地址 " "

相关文章!