el-upload 图片缓存 解决过程

项目:使用element-ui el-upload 上传图片,默认选取文件后立即进行上传,使用

:http-request="httpRequest" 覆盖默认上传行为,上传成功后,后端需要对图片进行处理在返回给前端,返回图片url前端反显;

问题:返回后的url地址没错,浏览器直接打开也没问题,img src显示也是最新的地址,但是前端显示的却是没有处理的图片

猜想:1.可能是前端页面没有刷新过来,数据改变了,页面没有刷新;2.可能是浏览器缓存问题;3.nginx缓存问题,

尝试的解决方法:1.前端在接口返回成功进行src赋值后强制刷新页面(失败);2.el-upload 自带的清楚缓存的方法,this.$refs.upload.clearFiles()  this.$refs.upload.uploadFiles = [](清空已上传的文件列表)(失败);3.浏览器缓存,在header添加 Cache-Control "no-cache, no-store, must-revalidate" 不使用任何缓存,(失败);4.nginx配置禁止缓存 cache-control:no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0(成功)

---------------------------------------------------------

测试后发现图片显示还有问题,,,,,

究其原因是后端处理后返回的url和处理前的url地址是一摸一样的,,,

一样的数据不会触发updata

最后在url 后面加上时间戳解决了。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值