用文件提交反应表单

Posted 2023-02-22

【中文标题】用文件提交反应表单

【英文标题】：React Form with file submission

【发布时间】：2018-11-28 05:59:39

【问题描述】：

我现在正在练习使用Reactjs 上传文件。这是一个简单的问题，但我无法将解决方案连接到axios。我知道state 和Form 是如何工作的，但是我的javascript 回调值不包含我给定的任何输入。或者我找不到我的values。这是我的情况。

import React, Component, Fragment from 'react';
import tokamakConfig from './Configuration_icon_by_obsilion.png';
import Form from 'semantic-ui-react';

class Advance extends Component 
  handleSubmit(event, values)
    console.log(event);
    console.log(values);
  

  render() 
    return (
      <Fragment>
        <h1>Please provide necessary information for the operation</h1>
        <img src=tokamakConfig alt='tokamak configuration' />
        <Form onSubmit=this.handleSubmit>
          <Form.Group inline>
            <label>Load input file</label>
            <input name='file' type='file' />
          </Form.Group>

          <Form.Group inline>
            <label>Comment</label>
            <input name='comment' type='text' placeholder='This is an advanced mode'/>
          </Form.Group>
          <button type='submit'>Submit</button>
        </Form>
      </Fragment>
    )
  


export default Advance;

在我的console.log()。我得到了proxy 对象和onSubmit 对象。我在那里找不到我的任何输入。然后我不知道如何将我的值发送给axios

问题： 如何将POST文件从form转为endpoint

【问题讨论】：

你的内容类型应该是'Content-Type': 'application/x-www-form-urlencoded'

@SangramBadi 谢谢你的评论。我该怎么办？我需要把这个论点放在哪里？

你在用axios吗？如果是，那么您需要在那里传递Content-Type。你能发布你的 axios 代码吗？

我知道。但我还没有处于那种状态。谢谢。

查看***.com/questions/41878838/…

【参考方案1】：

<input type="file" onChange= (e) => this.handleChange(e.target.files)  />

您需要使用 onChange 事件来获取文件数据。

handleChange(selectorFiles: FileList)
    
        console.log(selectorFiles);
    

那你需要获取方法里面的文件信息

【讨论】：

非常感谢！我从来不知道我必须使用.bind。这是一个小问题。我可以在.bind()技术上阅读什么样的主题？

你需要检查javascript ES6

知道了。我很快就会报读 ES6 课程。