Reactjs 上传后显示新图像

Reactjs 上传后显示新图像,reactjs,baqend,Reactjs,Baqend,快速提问,使用React中的Baqend SDK,我使用数据库中保存的对象id作为名称来保存配置文件图像 但是为了在上传图像后在用户浏览器中更新图像,我修改了state并在Baqend返回的file.url末尾添加&updated=true 保存图像代码: uploadLogo(event) { event.preventDefault(); const name = this.props.match.params.id+"logo"; const file = ev

快速提问,使用React中的Baqend SDK,我使用数据库中保存的对象id作为名称来保存配置文件图像

但是为了在上传图像后在用户浏览器中更新图像,我修改了state并在Baqend返回的file.url末尾添加&updated=true

保存图像代码:

  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加载一堆图像,会有任何副作用吗

我可以想象像这样的url参数被忽略了?只有一个人在更新徽标并且仅在他更新徽标后立即使用?updated=true加载图像


另外,在file.url中添加的?BCB做了什么?

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

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


此过期信息也通过Bloom筛选器传播到其他客户端。这可确保其他客户端不会将图像从其本地缓存中取出,因此也不会看到新图像。

我不确定,但我认为向查询字符串添加另一个参数的方法只是强制浏览器下载图像,而不是使用缓存版本。这就是我在处理上传时所做的,我需要保留图像名称。你是在这里上传新图像还是更新一个图像?Florian,这段代码用于上传第一个图像和用{force:true}替换现有图像,因为我正在重命名图像以匹配公司id。这太棒了,非常聪明。问题是我不明白它在做什么,并在最后用?BCB保存URL。我修改了它保存图像URL的方式,使其不具有此功能,现在它更新了w/o adding?upload=true。