react上传图片

来源:互联网 发布:oracle创建数据库失败 编辑:程序博客网 时间:2024/05/22 17:46
//form表单
<form onSubmit={this.handleSubmit.bind(this)}      name="fileinfo">  {/*accept限定图片上传格式,指定id,方便formData上传时获取file的数据*/}  <input id="imgUrl" name="from1" type="file" accept="image/jpeg,image/x-png,image/gif"         ref="files" onChange={(e) => {    this.judge(e.target.files[0])  }}/></form>
//提交按钮
<input style={{opacity: 1}} onClick={() => {   this.addChapter(submitPath)}} form="UpdataImg" id="Button1" type="submit" value="上传"/>


//addChapter
addChapter(submitPath) {  let input = document.forms['fileinfo'].from1  let data = new FormData()  data.append('from1', input.files[0])  const {dispatch,query,addNotification} = this.props;  fetch(submitPath, {    method: "POST",    body: data  }, dispatch(ToggLoad()))    .then(response => response.json())    .then(response => decode(response))    .then(json => {
//上传成功的的逻辑      dispatch(ToggLoad())    })    .catch(err => {      dispatch(ToggLoad())    })}

阅读全文
1 0
原创粉丝点击