react上传图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Juniorselk/article/details/78455592

//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())
    })
}