Springboot +Vue,上传图片没反应(已解决)

在前端修改个人信息的vue界面,更换头像选择1.34MB的图片上传没反应,搜了下是因为springboot默认上传图片最大限制是1MB,尝试在后端的application.yml添加如下代码:

spring:
  ...
  servlet:
    multipart:
      max-file-size: 50MB
      max-request-size: 50MB

但是max-file-size和max-request-size有黄线警告说:Cannot resolve configuration property 'spring. datasource. multipart. max-file-size',就没生效。

然后有说法是配置Nginx文件,但是这东西是Linux系统的,我用的是Windows,似乎windows系统要配置tomcat,就试了下:

tomcat:
    max-http-form-post-size: 50MB

但还是没用,根本没生效,同样又黄线警告。

后来我复制粘贴这段,黄线警告突然消失了:

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 100MB

重启IDEA项目,就可以上传更大的图片了。

这个配置文件内的黄线警告暂时没搞明白怎么回事。一模一样的代码,手动输入就不会出错,但是复制粘贴就可能出错。。

### Spring BootVue项目中更换图片后不生效的解决方案 在Spring BootVue项目中遇到更换图片后无反应的问题,通常是因为缓存机制或者静态资源未被正确更新所导致。以下是可能的原因分析及对应的解决方案: #### 1. 浏览器缓存问题 浏览器可能会对图片或其他静态文件进行缓存,因此即使服务器上的文件已更改,客户端仍然加载的是旧版本。 - **清除浏览器缓存**:可以尝试手动清除浏览器缓存或通过开发者工具禁用缓存功能。 - **强制刷新页面**:按下 `Ctrl + F5` 或者 `Cmd + Shift + R` 进行硬刷新[^1]。 如果上述方法无法解决问题,则可以通过修改URL来绕过缓存。例如,在请求图片时附加时间戳参数: ```javascript const imageUrl = '/images/example.jpg?' + new Date().getTime(); document.getElementById('image').src = imageUrl; ``` #### 2. 静态资源配置问题 在Spring Boot中,默认情况下会将 `/static`, `/public`, `/resources`, 和 `/META-INF/resources` 中的内容作为静态资源提供给前端访问。如果这些目录中的文件未被正确映射到路径上,可能导致新上传图片不可见。 - 确认图片存储位置是否位于以上指定目录之一,并且其路径匹配实际需求[^4]。 - 如果自定义了静态资源路径,请检查application.properties(application.yml)配置项是否有误。比如下面的例子展示了如何扩展默认静态资源处理逻辑: ```properties spring.resources.static-locations=classpath:/my-custom-static/ ``` #### 3. 文件同步延迟 当使用某些部署策略(如云服务、CDN分发网络)时,可能存在一定的文件同步延迟现象。 - 对于本地开发环境而言,确保每次改动都能及时反映至运行实例之中即可;而对于远程服务器来说,则需关注具体的服务提供商文档说明了解相关情况[^2]。 #### 4. 前端构建过程影响 如果是基于Webpack打包后的Vue应用,那么生产模式下的优化措施也可能造成此状况发生——即哈希值嵌入到了最终输出文件名当中使得原有链接失效。 - 更新HTML模板内的引用地址使之指向最新生成带hash值命名形式的新版素材文件; - 同样也可以考虑采用动态导入的方式按需加载所需媒体资料从而减少此类麻烦的发生几率[^3]。 综上所述,针对不同场景采取相应对策能够有效应对因各种因素引起的“更换图片却不显示”的难题。 ```html <!-- 示例 --> <img id="dynamicImage"> <script> const timestamp = '?' + new Date().getTime(); document.querySelector('#dynamicImage').setAttribute('src', './path/to/image.png' + timestamp); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值