SpringBoot接收前端的MultipartFile file一直为null问题解决

1、首先给出我的前后端代码
html部分

<span class="im-chat-tool-item ">
        <i class="m-icon-file-open" @click="$refs.uploadImage.click()">
              <input
                type="file"
                name="file"
                id="file"
                ref="uploadImage"
                style="display: none"
                @change="uploadFile"
              />
            </i>
      </span>

html显示的样式是这样的

然后前端js发送文件部分

 async uploadFile() {
      const file = document.querySelector("#file").files[0]
      const formData = new FormData();
      formData.append('file', file);
      formData.encType = "multipart/form-data"
      console.log('文件', formData.get('file'))
      axios({
        url: '/tfapp/chatFile/uploadFileTest',
        method: 'post',
        processData:false,
        data: formData,
        headers: {'Content-Type': "multipart/form-data"}
      })
    }

后端接收文件部分
因为一直在解决bug就没有写接收文件之后的逻辑

 public String uploadFileTest(@RequestPart(value = "file") MultipartFile file)  {
        System.out.println(file);
        return "上传文件无可用数据";
    }

2.问题分析
a.首先前后端文件，参数名都是file，那就排除网上找的一大堆名字不一致的原因
b.查看前端发送的参数是否正确（点那个view source, 不然一直显示 file(binary)）,如果跟下图一样，前端没有问题，我之前一直在找前端的问题，

排除前端的问题后，接下来就是后端的问题,后端是springboot框架
在网上查过是依赖冲突的问题，
MultipartAutoConfiguration.class与Springboot整合的import org.springframework.web.multipart.MultipartFile;冲突
然后再启动类加上@SpringBootApplication(exclude = {MultipartAutoConfiguration.class})解决这个冲突，如下图所示

后来启动后发送文件报错，如下
Unable to process parts as no multi-part configuration has been provided

这时需要在补充一个配置文件

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

/**
 * @Author xxxxx
 * @Description
 * @Date 2021/1/14 10:01
 */

@Configuration
public class UploadConfig {
    @Bean(name="multipartResolver")
    public MultipartResolver multipartResolver(){
        return new CommonsMultipartResolver();
    }
}

问题就解决了，解决后如下图所示