上传后显示新图片

Question

快速提问，在 React 中使用 Baqend SDK，我使用保存在数据库中的对象的 ID 作为名称来保存个人资料图像。

但是为了让图像在上传后在用户的浏览器中更新，我正在修改状态并将 &updated=true 添加到 file.url 的末尾，因为它是由 Baqend 返回的。

图片保存代码：

  uploadLogo(event) {
    event.preventDefault();
    const name = this.props.match.params.id+"logo";
    const file = event.target.files[0];
    const img = new db.File({ name: name, data: file, type: 'blob' });
    img.upload({force: true}).then((file) => {
      db.Companies.load(this.props.match.params.id).then(company => {
        this.setState({
          logo: file.url+"?updated=true"
        });
        company.logo = file.url;
        return company.update();
      },
      (error) => {
        alert(error);
      });
    });
  }

这是 React 和 Baqend SDK 的正确方法吗？如果我通过 URL 加载一堆像这样的图像，是否会有任何副作用：https://remarkable-apple-95.app.baqend.com/v1/file/www/cce9830b-48eb-422e-830d-72ae28571480logo?BCB&updated=true

我想 url 这样的参数会被忽略？唯一要使用 ?updated=true 加载图像的人是更新徽标的人，并且仅在他更新后立即加载。

此外，file.url 中添加的 ?BCB 是做什么的？

Answer 1

到目前为止，您的示例看起来不错。

但是您根本不应该添加额外的查询参数，因为它们会导致 CDN 中的缓存未命中。 BCB（Baqend Cache Buster）实际上是您尝试使用 ?upload=true 参数归档的内容。如果之前更改了图像，SDK 会自动添加这些缓存无效化程序。 BCB 确保从服务器获取新图像，并且仅通过重新验证 headers 缓存，直到旧图像在浏览器缓存中过期。我们的 CDN 缓存知道这个特殊的缓存破坏者并将图像请求重写回原始 URL 以确保 CDN 中的缓存命中。请注意，如果内容发生更改，我们的 CDN 缓存会立即失效。

此过时信息也通过布隆过滤器传播到其他客户端。这可确保其他客户端不会从其本地缓存中取出图像，因此也不会看到新图像。

上传后显示新图片

Show new image after upload

reactjs

baqend