以Axios为例，如果我们使用一般的对象或者参数形式是无法实现文件传递的，必须使用FormData的形式来实现。FormData 是一个用于在 JavaScript 中创建和管理表单数据的 API。它提供了一种方便的方式来构建、序列化和发送包含文件和键值对的表单数据。使用 FormData，我们可以通过一些内置方法来添加键值对或文件数据，最终将整个FormData传递给后端。

       在上一节中，我们已经得到了文件参数file，这里我们首先判断file是否为空，如果不为空，则将this.file.raw添加到formdata中，并将键命名为file。这里有几点需要注意：

(1)一定要使用this.xxx。这是易错点。

(2)一定要使用file.raw，因为file.raw中才是真正的文件参数。

(3)键值对中的键的命名取决于你后端接收这个文件参数时使用的名字。

       相关代码如下：

let formdata = new FormData();

if(this.carManagementData.editCarInfoForm.photoFile != null){

formdata.append("file", this.file.raw);

}

        如果我们还需要传递其他参数怎么办？

        为了方便传参以及后端接收参数，我将其他参数封装成一个对象。首先创建一个新对象，将我们需要像后端传递的参数都放在这个对象中。例如：

const uploadForm = {

data: {

plateNumber:this.carManagementData.editCarInfoForm.plateNumber,

model:this.carManagementData.editCarInfoForm.carType,

fuel:this.carManagementData.editCarInfoForm.fuel,

seatNumber:this.carManagementData.editCarInfoForm.seatNumber,

}

}

       这里我把我需要传给后端的参数都放在了uploadForm这个对象中了。但是现在，我们不能直接将此对象放在FormData中，而是先需要进行一番如下的转换，然后再将其添加到前面的formdata中：

const jsonStr = JSON.stringify(uploadForm.data);

const blob = new Blob([jsonStr],{

type: 'application/json'

});

formdata.append("addCarInfoForm",blob);

       首先，通过 JSON.stringify(uploadForm.data) 将 uploadForm.data 这个 JSON 对象转换为 JSON 字符串。这个 JSON 字符串表示了一个包含表单数据的对象。

       然后，通过 new Blob([jsonStr], { type: 'application/json' }) 创建一个 Blob 对象。Blob 是二进制数据的容器，它可以包含不同类型的数据，并且通过设置 type 属性指定了这个 Blob 对象的 MIME 类型，这里类型为 application/json。

       最后，通过 formdata.append("addCarInfoForm", blob) 将这个 Blob 对象添加到 FormData 中。

完成上述步骤之后，我们就可以使用Axios发送请求了，如下图所示：

 3.后端如何来接收？

       后端可以使用@RequestParam注解来接收文件参数。但是，如果我们使用@RequestBody注解来接收我们传递的对象参数时，发现其传过来的值输出后都为null，但是我们验证之后发现前端确实成功传递了这个对象参数。因此，这里我们要使用@RequestPart注解来接收前端传过来的对象参数，这样就能够成功接收了。具体代码如下：