axios 将图像文件发布到服务器

bqujaahr  于 2023-06-22  发布在  iOS
关注(0)|答案(3)|浏览(150)

db.json我发布到我的db.json的图像文件丢失。

const createPost = async (title, image, description) => {
 const data = new FormData();
    data.append('title', title);
    data.append('image', image);
    data.append('description', description);

    const response = await axios.post('http://localhost:3001/posts', data, {
      headers: {
        'Content-Type': 'application/json',
      },
    });

    const updatedPosts = [...posts, response.data];
    setPosts(updatedPosts);
  };
export const Form = ({ createPost }) => {
  const [image, setImage] = useState(null);

  const submitForm = (e) => {
    e.preventDefault();

    createPost(title, image, description);
    setImage('');
    setTitle('');
    setDescription('');
  };

  const uploadImage = (e) => {
    const file = e.target.files[0];
    setImage(file);
  };

  return (
    <form onSubmit={submitForm} encType="multipart/form-data">
      <div className="image">
        <label>Import Image</label>
        <input type="file" accept="image/*" onChange={(e) => uploadImage(e)} />
      </div>
      <div className="action">
        <Button className="button">Create</Button>
      </div>
    </form>
  );
};

我想将我的数据发布到我的服务器。但是,我的db.json中只缺少一个图像文件。我修复代码的更好方法是什么?

plupiseo

plupiseo1#

我认为你头的内容类型必须是multipart/form-data,或者你必须将你的图像转换为base64字符串,而不需要将它添加到表单数据中,如果你使用express,你可能必须使用bodyparserer和fs包太多。

ie3xauqp

ie3xauqp2#

onChange只接受函数名。所以,修改这个

onChange={(e) => uploadImage(e)}

onChange={uploadImage}

因为你已经在前面的代码中定义了uploadImage函数。

yyyllmsg

yyyllmsg3#

我不知道,但我认为你的问题是在后端代码。但是,尝试更改data.append的顺序,将data.append(file)移动到最后。

data.append('title', title)
data.append('description', description)
// ...appends some field
data.append('file', file)

如果不工作,请给我看你的后端代码。(如何生成db.json文件)

相关问题