前端通过ajax同时上传文件和其它信息，SpringMVC后台接收

港控/mmm° 2021-11-16 07:54 275阅读 0赞

## 1、前端写法 ##

***描述：***通过前端上传一些注册信息，其中包括选择的文件信息。

***代码：***

//标签写法
    <input type="text" name="username" id="username" />
    <input type="password" name="password" id="password" />
    <input type="file" name="imgFile" id="imgFile" />
    
    
    //js获取数据
    var username = document.getElementById("username").value;
    var password= document.getElementById("password").value;
    var imgFile = document.getElementById("imgFile").files;   //文件是通过.files取数据
    
    var formData = new FormData();  //通过FormData拼装数据
    formDate.append("username", username);
    formDate.append("password", password);
    formDate.append("file", imgFile[0]);  //因为取出的文件是数组，所以取第一项
    
    //通过ajax发送数据
    $.ajax({
        url: "",
        type: "post",
        contentType: false,
        data: formData,
        success: function(result) {}
    });

## 2、SpringMVC后台接收 ##

***描述：***接收前台传过来的数据进行处理。

***代码：***

/**
     * file:通过MutipartFile类接收文件信息
     * user:通过实体类接收其他信息，字段要与实体类一一对应 
     */
    @PostMapping("/register")
    public String register(MutipartFile file, User user) {
        //.....
    }

## 3、配置文件 ##

***描述：***要在配置文件中配置相关数据，具体的配置文件根据项目而定，详细配置信息另行查阅。

***代码：***

#springboot的application.yml配置方法：
    spring: 
        servlet:
            multipart: 
                max-file-size: 10MB   #最大上传大小

### \------扫码进群，怕你禁不住福利的诱惑------ ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE5MjEwMg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE5MjEwMg_size_16_color_FFFFFF_t_70]: /images/20211116/042ccdff26e04d9c91dec71bcd7054ff.png