react上传图片

最新推荐文章于 2025-03-28 14:38:20 发布

Erukusanze

最新推荐文章于 2025-03-28 14:38:20 发布

阅读量6.3k

点赞数 2

分类专栏： React 文章标签：图片 react React表单提交

本文链接：https://blog.youkuaiyun.com/Juniorselk/article/details/78455592

版权

React 专栏收录该内容

11 篇文章

订阅专栏

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