React中如何通过input标识获取e.target.files[0]图片更新state后用axios提交

核心实现逻辑 #

你已经为每个文件输入框设置了和state字段完全对应的name属性，直接利用该属性作为匹配标识即可完成对应字段的更新，具体修改如下：

1. 改造文件选择事件处理方法 #

通过e.target.name获取当前输入框的标识，使用ES6计算属性名动态更新state对应字段：

handleImageChange = (e) => {
  const fieldKey = e.target.name;
  const selectedFile = e.target.files[0];
  this.setState({
    [fieldKey]: selectedFile
  });
}

2. 修正表单提交逻辑 #

原代码中state不存在images集合字段，需要遍历state中所有已上传的文件，逐个追加到FormData对象：

handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData();
  // 遍历state所有字段，仅追加有值的文件字段
  Object.entries(this.state).forEach(([fieldKey, file]) => {
    if (file) {
      formData.append(fieldKey, file, file.name);
    }
  });
  this.props.createUserKyc(formData);
};

3. 补全剩余上传输入框 #

其余证件上传输入框保持name属性和state字段名完全一致即可，示例如下：

{/* Adhar背面 */}
<div className="form-group">
  <label>Adhar Back</label>
  <input
    accept="image/png, image/jpeg"
    className="form-control"
    name="adhar_back"
    onChange={this.handleImageChange}
    required
    type="file"
  />
</div>

{/* 手持证件照 */}
<div className="form-group">
  <label>Avatar</label>
  <input
    accept="image/png, image/jpeg"
    className="form-control"
    name="avatar"
    onChange={this.handleImageChange}
    required
    type="file"
  />
</div>
{/* 存折、驾照、PAN卡等输入框按上述规则添加即可 */}

注意事项 #

• 输入框的name属性必须和state中对应字段的拼写完全一致，包括大小写、下划线，否则会出现匹配错误
• 若需要支持单字段多文件上传，给input添加multiple属性，同时修改handleImageChange逻辑存储整个e.target.files数组即可

内容的提问来源于stack exchange，提问作者aman singh