使用React+Axios上传文件至Strapi报multipart/form-data 400错误怎么解决？

该错误是Strapi对multipart/form-data类型请求的强制格式要求导致的：

• 所有非文件的业务字段（即使没有额外业务字段）必须转成JSON字符串，存放在FormData的data字段中
• 上传的文件必须存放在files.xxx格式的字段下，其中xxx对应你Strapi集合中定义的文件存储字段名
  你当前的写法既没有提供必填的data字段，也没有按照Strapi要求的格式存放文件，因此触发400错误。另外你代码中还有一处逻辑错误：handleFileSelect里已经把单个文件对象存入state，后续使用时不需要再加[0]读取，会拿到undefined。

const Form = () => {
  
  const [selectedFile, setSelectedFile] = React.useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    // 必须传data字段，无额外业务字段传空对象即可
    formData.append("data", JSON.stringify({}));
    // 按Strapi要求的格式存文件，selectedFile对应你Strapi集合里的文件字段名
    formData.append("files.selectedFile", selectedFile);
    try {
      const response = await axios({
        method: "post",
        url: "http://localhost:1337/document-uploads",
        data: formData,
        // 不需要手动设置Content-Type，浏览器会自动生成带boundary的正确值
      });
    } catch (error) {
      console.log(error);
    }
  };

  const handleFileSelect = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileSelect} />
      <input type="submit" value="Upload File" />
    </form>
  );
};

export default Form;

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