上传后显示新图像

Question

快速提问，使用React中的Baqend，我使用保存在数据库中的对象的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的正确方法吗？如果我按如下所示按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 )实际上是您试图用?upload=true参数存档的文件。如果先前更改了图像，SDK会自动添加这些缓存破坏程序。BCB确保从服务器获取新映像，并且只使用重新验证头缓存，直到旧映像在浏览器缓存中过期为止。我们的CDN缓存知道这个特殊的缓存破坏程序，并将图像请求重写回原始URL，以确保CDN中的缓存命中。注意，如果内容被更改，我们的CDN缓存将立即失效。

此延迟信息也通过Bloom过滤器传播到其他客户端。这确保了其他客户端不会将图像从本地缓存中取出，因此也会看到新的映像。