上传后显示新图像

快速的问题，在React中使用Baqend SDK，我使用保存在数据库中的对象的ID作为名称来保存配置文件图像。上传后显示新图像

但是为了在上传后在用户的浏览器中更新图像，我正在修改状态，并在file.url的末尾添加了& updated = true，因为它是由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); 
     }); 
    }); 
    }

这是与反应，在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？

来源

2017-10-05 Chris Chong

我不确定，但我认为这种向查询字符串添加另一个参数的方法只是强制浏览器下载图像而不使用缓存版本。这是我在处理上传时所做的事情，而且我需要保留图像名称。 –

你在这里上传新图片或更新吗？ –

弗洛里安，这段代码用于上传第一张图片并用{force：true}替换现有图片，因为我正在重命名图片以匹配公司ID。 –

你的例子看起来不错。

但是，您不应该添加额外的查询参数，因为它们会导致CDN中的缓存未命中。 BCB（Baqend Cache Buster）实际上是您尝试使用？upload = true参数存档的内容。如果以前更改过图片，则SDK会自动添加这些缓存锁定器。 BCB确保从服务器获取新图像，并且只有在重新验证标头中缓存，直到旧图像在浏览器缓存中过期。我们的CDN缓存意识到这个特殊缓存中断器，并将映像请求重写回原始URL，以确保缓存命中CDN。请注意，如果内容发生更改，我们的CDN缓存会立即失效。

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

来源

2017-10-05 21:05:20

这真棒，非常聪明。这个问题是我不明白它在做什么，并最终保存了BCB的URL。我修改了它保存图片URL的方式，但没有更新，现在更新不添加？upload = true。 –

上传后显示新图像

回答

相关问题