ReactJS上传文件时FormData append后值为空的问题求助

问题解决方案 #

你遇到的问题由三个常见错误导致，对应修复方案如下： #

1. 修复FormData为空的假象

你直接打印FormData实例默认不会输出内部存储的键值对，属于浏览器的正常表现，不是数据真的没有添加成功。你可以用formData.get('image')验证内容是否存在，也可以用如下代码遍历所有内容：

for (let [key, value] of formData.entries()) {
  console.log(key, value)
}

2. 移除手动设置的Content-Type

你在axios请求配置中手动指定了"Content-Type": "multipart/form-data"，这个配置是错误的。multipart/form-data请求头必须附带浏览器自动生成的boundary分隔符，手动设置会覆盖掉正确的请求头，导致后端无法正常解析FormData内容。直接删除headers里的Content-Type配置即可，axios会自动为FormData类型的请求体设置正确的请求头。 #

3. 删除文件输入的value属性

你给type为file的CInput组件绑定了value={image}属性，文件类型的输入框不支持设置自定义value（仅支持设置为空字符串清空选择），该配置会导致文件选择行为异常。直接删除CInput上的value属性即可。 #

修正后代码示例 #

上传处理函数

const uploadFileHandler = async (e) => {
  const file = e.target.files[0];
  const formData = new FormData();
  formData.append("image", file);

  console.log(formData.get('image'));
  setUploading(true);

  try {
    const { data } = await axios.post(
      "/api/v1/uploads/primary",
      formData
    );
    setImage(data);
    setUploading(false);
  } catch (error) {
    console.error(error);
    setUploading(false);
  }
};

表单组件

<CFormGroup>
  <CLabel
    htmlFor="images"
    style={{ fontWeight: "bold", fontSize: 15 }}
  >
    Featured Image
  </CLabel>
  <CInput
    style={{ height: "calc(2em + 0.75rem + 2px)" }}
    accept="*"
    type="file"
    id="images"
    placeholder="Choose Featured Images"
    onChange={uploadFileHandler}
  />
  {uploading && (
    <div className="spinner-border text-primary" role="status">
      <span className="sr-only">Loading...</span>
    </div>
  )}
</CFormGroup>

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