Question

我正在尝试通过React中的表单字段向后端发送图像。我在构造函数类

中首先将状态指定为空

this.state = {
  image: "",
}

然后我为图像和普通文本字段创建一个handleChange函数。

handleChange(event) {
  const state = this.state;
  switch (event.target.name) {
    case 'image':
      state.image = event.target.files[0];
      break;
    default:
      state[event.target.name] = event.target.value;
  }
  this.setState(state);
}

在handleSubmit函数中，我正在调用FormData函数并将图像附加到它上面

handleSubmit(event) {
		event.preventDefault();
		const { syllabus,image } = this.state;
		let formData = new FormData();
		formData.append('image', image);
		axios.post('api', { syllabus, formData })
			.then((response) => {
				console.log(response);
			});
	}

最后，这是我的表单字段

<span className="btn btn-default btn-file file-choose">
		<input type="file" name="image" placeholder="Enter Image" onChange={this.handleChange} />
													</span>

当我提交此表单并在Chrome控制台中检查我的“网络”标签时，formData似乎是空的，即没有传递图像。当我用选择的文件调用后端路由时，文件被上传，但我无法从React前端实现这一点，并且图像永远不会被传递。我哪里错了？

Answer 1

您需要为内容类型

发送标头

const config = {
        headers: { 'content-type': 'multipart/form-data' }
    }

    return axios.post('api', { syllabus, formData }, config)

Answer 2

在您的HTML中，您应该

<form enctype="multipart/form-data">
   ...rest of your code
</form>

如果您想检查数据，请尝试使用

进行记录

for (let obj of formData.entries()) {
   console.log(`${obj[0]} => ${obj[1]}`); 
}

Answer 3

我自己解决了这个问题。首先，我指定了默认状态this.state={image: new File([''], ''),}

这是它的处理函数

handleIChange() { const inputFile = $("input#input-image")[0].files[0]; this.setState({ image: inputFile }); }

这就是提交的方式

＆＃13;

handleSubmit(event) {
  event.preventDefault();
  const image = this.state.image;
  let formData = new FormData();
  formData.append("image", $("input#input-image")[0].files[0]);
  //console.log("image3", $("input#input-image")[0].files[0])
  //console.log("Data", formData)
  const config = {
    headers: {
      'Content-Type': 'multipart/form-data;boundary=${data._boundary}'
    }
  };
  axios.post('api', formData, config)
    .then((response) => {
      console.log(response);
      let id = response.data._id;
      this.props.history.push('route);
    });
}

＆＃13;

reactjs：无法通过反应将文件传递给节点后端

3 个答案: