时间戳

首页 > 解决方案 > 来自 GCS 的带有公共 URL 的图像在状态更新后不会立即显示，但在刷新页面后可以工作

reactjs - 来自 GCS 的带有公共 URL 的图像在状态更新后不会立即显示，但在刷新页面后可以工作

问题描述

我有一个表单，可以使用@google-cloud/storage将数据上传到 mongoDB 并将图像上传到 Google Cloud Storage 的存储桶中。这些图像具有公共 URL。提交后，我立即对我的后端进行 API 调用，然后更新我的状态。但是，最近上传的图像不会显示，只会响应 403 错误。使用 img 标签在公共 URL 上获取请求时出错

我的提交处理函数：

 const handleSubmit = async () => {
 const repairData = new FormData();

 try {
   if (state.device && state.issue && state.image) {
     repairData.append("device", state.device);
     repairData.append("customer", user._id);
     repairData.append("issue", state.issue);
     repairData.append("image", state.image);
     repairData.append("expedite", state.expedite);
     await api.post("/requests/create", repairData, {
       headers: { "auth-token": token },
     });
     setState({
       device: "",
       issue: "",
       image: null,
       expedite: "No",
       hasError: false,
       errorMessage: "",
     });
     setShow(false);
     getRepairs();
   } else {
     setState({
       ...state,
       success: false,
       hasError: true,
       errorMessage: "Missing required information!",
     });
   }
 } catch (error) {
   console.log(error);
 }
};

我的 API 调用函数：

const getRepairs = async () => {
    try {
      const response = await api.get("/user/requests/", {
        headers: { "auth-token": token },
      });
      setRequests([...response.data.repairs]);
    } catch (error) {
      console.log(error);
    }
  };

仅显示缓存的图像。当页面刷新时，图像将相应显示。我也可以在浏览器上查看图像。我已经尝试过可能的事情，比如这个，但它仍然不起作用。

标签： reactjsgoogle-cloud-platformgoogle-cloud-storage

解决方案

正如@Jan Hernandez所说，我检查了我的谷歌云上传功能，它正在响应，即使它还没有完成上传！傻我。

原来的

await storage
    .bucket(process.env.BUCKET_NAME)
    .upload(filename, options, (err, file, cb) => {
      if (err)
        return res.status(409).json({
          message: "Error uploading!",
        });
    });

  return res.status(200).json({
    repair: req.repair,
    message: "Upload successful",
  });

正确的

 await storage
    .bucket(process.env.BUCKET_NAME)
    .upload(filename, options, (err, file, cb) => {
      if (err)
        return res.status(409).json({
          message: "Error uploading!",
        });
      res.sendStatus(200);
    });

推荐阅读