Vue使用element组件el-upload手写axios上传图片到后端java接口,数据用Formdata传递。
使用element组件el-upload手写axios上传图片到后端java接口,数据用Formdata传递。前端代码:action这里随便写个地址就行,因为我们是自己手写上传不用elment自带的东西(别问我为什么不用element自带的,我是自学的弄会啥算啥!),这块基本上就是直接复制的官方文档没什么多说的。vue js代码:这里的1是新建一个formdata对象用来存数据,4的位置...
·
前端代码:
action这里随便写个地址就行,因为我们是自己手写上传不用elment自带的东西(别问我为什么不用element自带的,我是自学的弄会啥算啥!),这块基本上就是直接复制的官方文档没什么多说的。
vue js代码:
这里的1是新建一个formdata对象用来存数据,4的位置是我百度搜了2天才搜出来的赋值一定是file.raw!!! 2 和 3 是解决 后端各种500错误的。具体有没有用你可以自己删了试一试,目前我不想动弹。
浏览器console和network处的显示:
这两个红色的地方 形式一定要是这样的,不是这样的就报错,尤其是第二个方框,个人觉得因为你后端接口要参数,所以你得传键值对,但是字符串键值对好写,你要传包含文件的键值对就要用formdata。
后端接收代码:
我后端就接收一个参数img,所以前端的formdata里就一个参数。上边3个@也是,又没有用自己去试一试吧。
实现方法:
大体就是点击上传选图片,然后再在下边框里点一下就上传上去了。可以多选,挨个点挨个上传。
后端解决跨域问题:
package com.example.springboottest1.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
// 1允许任何域名使用
corsConfiguration.addAllowedOrigin("*");
// 2允许任何头
corsConfiguration.addAllowedHeader("*");
// 3允许任何方法(post,get等)
corsConfiguration.addAllowedMethod("*");
corsConfiguration.setAllowCredentials(true);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)