React中如何将onChange获取的文件传入Upload图片上传函数？

你可以通过以下几种方式让upload函数拿到setState存储的file文件：

1. 手动触发上传（推荐，更灵活） #

在页面添加上传按钮，点击时直接从组件state中取出文件，调用upload函数：

步骤1：在render中添加上传按钮 #

render() {
  return (
    <div>
      <input type="file" onChange={this.changeProfileImage} />
      {/* 点击按钮触发上传 */}
      <button onClick={() => this.upload(this.state.file)}>上传头像</button>
    </div>
  );
}

步骤2：初始化组件状态 #

在组件构造函数里初始化file状态：

constructor(props) {
  super(props);
  this.state = {
    file: null
  };
  // 若changeProfileImage不是箭头函数，需绑定this
  // this.changeProfileImage = this.changeProfileImage.bind(this);
}

用户选择文件后，state会存储选中的文件，点击按钮即可将state里的file传入upload完成上传。

2. 选择文件后自动上传 #

如果需要选完文件立即上传，可利用setState的回调函数（setState是异步操作，回调会在状态更新完成后执行）：

修改changeProfileImage函数：

changeProfileImage=(event)=>{
  const selectedFile = event.target.files[0];
  this.setState({ file: selectedFile }, () => {
    // 状态更新完成后调用上传
    this.upload(this.state.file);
  });
}

优化上传函数 #

注意：axios会自动识别FormData并设置正确的Content-Type（包含boundary），手动指定反而可能导致错误。优化后的upload函数如下：

upload(file) {
  // 先判断是否有文件，避免上传空内容
  if (!file) {
    console.error('请先选择要上传的头像文件');
    return Promise.reject('未选择文件');
  }
  
  let formData = new FormData();
  const username1 = localStorage.getItem('username');
  formData.append("file", file);
  
  return axios({
    method: 'post',
    url: `http://localhost:3000/users/addUserImage/${username1}`,
    data: formData
  });
}

内容的提问来源于stack exchange，提问作者takis Paras