关于React 的文件上传

接触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>
)
}
}

 

 

react导出Excel表

.then(response => response.blob())
        .then(blob => {
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = "filename.xlsx";
            a.click();                    
        });

小程序开发干货汇总

转自:https://github.com/xiaobei666/weixin-xiaochengxu666-info

内容

UI组件

  • weui-wxss ★1873 – 同微信原生视觉体验一致的基础样式库
  • zanui-weapp ★794 – 好用易扩展的小程序 UI 库
  • wx-charts ★449 – 微信小程序图表工具
  • Wa-UI ★164 – 针对微信小程序整合的一套UI库
  • wux ★163 – 微信小程序自定义组件
  • wemark ★161 – 微信小程序Markdown渲染库
  • wxapp ★131 – 微信小程序组件
  • wx-scrollable-tab-view ★116 – 小程序可滑动得tabview
  • wxapp-img-loader ★101 – 微信小程序的图片预加载组件
  • WeZRender ★96 – 微信小程序Canvas增强组件
  • wetoast ★77 – 仿照微信小程序提供的showToast功能
  • wx-alphabetical-listview ★71 – 带字母可滑动的列表小程序
  • wx-drawer ★70 – 小程序模仿QQ6侧滑菜单
  • wxSearch ★70 – 微信小程序优雅的搜索框
  • wx_calendar ★65 – 小程序日历
  • wxapp-charts ★52 – 微信小程序图表charts组件
  • chartjs-wechat-mini-app ★42 – chartjs微信小程序适配
  • citySelect ★42 – 微信小程序城市选择器
  • WeiXinProject ★36 – 列表的上拉刷新和上拉加载
  • wepy-com-charts ★20 – 微信小程序wepyjs图表控件
  • WechatLoading ★14 – 加载框布局LoadingView
  • wxTabs ★13 – 微信小程序的多tab实现
  • wxapp-lock ★12 – 微信小程序手势解锁

开发框架

  • mpvue ★6425 – 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。vue人士福利
  • wepy ★1325 – 小程序组件化开发框架
  • Labrador ★785 – 微信小程序模块化开发框架
  • wxapp-devFrame ★49 – 小程序基本的开发框架

实用库

开发工具

  • wept ★1097 – 实时微信小程序开发工具
  • weapp-quick ★320 – “微信Web开发者”拷贝工具
  • Wxapp.vim ★213 – 微信小程序开发 Vim 插件
  • wechat_web_devtools ★179 – 微信开发者工具Linux版
  • miniapps ★131 – 小程序项目脚手架工具
  • Matchmaker ★107 – 专为微信小程序开发的插件
  • wecos ★64 – 微信小程序 COS 瘦身解决方案

服务端

项目实例

Demo