Vue使用element组件el-upload手写axios上传图片到后端java接口，数据用Formdata传递。

前端代码：
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);
    }
}