反应 - 上传图片并将上传路径 URL 附加到数据库条目

Question

使用 react/redux 工具包

我有一个项目创建屏幕，它上传项目的图像，然后在我的数据库中为该项目创建一个条目。

其中一个数据库值是 imageURL，它应该指向最近上传的图像。

我有一个 imageURL 的状态值，应该在文件上传后但在派遣创建数据库条目之前将其更改为正确的路径，但我无法设置 imageURL在发货之前。

我试过 useEffect 和 async，但它的 imageURL 似乎只能在发送后设置。

const [imageURL, setImageURL] = useState('');

  //File upload handler
  const uploadFileHandler = async (file) => {
    const formData = new FormData();
    formData.append('image', file);
    setUploading(true);
    try {
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      };
      const fileURL = await axios.post('/api/upload', formData, config);
      setUploading(false);
      return fileURL.data; //this is the path of the uploaded file
    } catch (error) {
      console.error(error);
      setUploading(false);
    }
  };

  //TODO: Submit handler
  const submitHandler = async (e) => {
    e.preventDefault();
    let path = await uploadFileHandler(uploadFile); //this should give me the URL from the upload
    setImageURL(path); //this should set the Image URL to the above value, but does not
    dispatch(createItem(data, headers));
  };

如果有人知道如何解决这个问题，我将不胜感激。

谢谢

Answer 1

它不会工作，因为 setImageURL 和 dispatch 在同一个函数上。发生的事情是它在设置图像 URL.

之前先完成功能

您可以将其作为“数据”插入到调度中，例如：

 const submitHandler = async (e) => {
    e.preventDefault();
    let path = await uploadFileHandler(uploadFile);
    dispatch(createItem({
       ...data,
       image_url: path, // idk if this is the correct property name on the data
    }, headers));
  };

或使用useEffect钩子：

 const submitHandler = async (e) => {
    e.preventDefault();
    let path = await uploadFileHandler(uploadFile);
    setImageURL(path);
  };

  useEffect(() => {
     if (imageURL !== '') {
        dispatch(createItem(data, headers));
     }
  }, [imageURL]);

如果图像URL发生变化，这种方式将触发调度。

反应 - 上传图片并将上传路径 URL 附加到数据库条目

react - upload image and attach upload path URL to database entry

mongoose

reactjs

redux-toolkit