场景：现有向视频上传接口同时发送视频文件和json（其中包含视频封面等信息），应该如何定义后端接口，前端又如何进行请求呢？

SpringBoot后端接口实现

可以编写如下的接口，以表单的形式接收视频文件（字段名为file）和媒体json数据（字段名为media），createMedia是需要实现的上传逻辑。

/**
     * 媒体上传
     * @param file
     * @param media
     * @param request
     * @return
     */
    @PostMapping("/media")
    public R uploadMedia(@RequestPart("file") MultipartFile file, @RequestPart("media") ResourceMedia media) {
        ResourceIndex index = mediaService.createMedia(file, media);
        return R.ok().data("index", index);
    }

使用Postman先测一哈

接口编写完成后，应该如何进行请求呢？可以先用Postman测试一下。

使用POST请求测试接口，在Body中携带媒体文件（file）和媒体json数据（media），需要特别注意的是，对于json字段需要将CONTENT-TYPE设置为application/json，否则SpringBoot将会报错，如下图所示：

至此，接口功能测试通过。

Vue前端使用axios如何发起请求

请求封装：自定义的resourceApi资源接口集合中，定义一个uploadMedia方法，data参数为表单数据

uploadMedia(data) {
    return request({
        url: `/resource/media/`,
        method: 'post',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: data
    })
},

发起请求：通过构建FormData作为表单数据，添加媒体json作为media字段的内容，需要构建Blob将其转换为application/json类型的数据，可被SpringBoot后端识别；添加媒体文件二进制数据作为file字段的内容。最后由刚刚的uploadMedia方法将表单数据提交即可。

const formData = new FormData()
formData.append('media', new Blob(['{"coverUrl": "https://fakeshop.tree.moe/static/avatar/2.png"}'], { type: 'application/json' }))
formData.append('file', this.fileList[0].raw)

resourceApi.uploadMedia(formData).then(resp => {
    if (resp.data && resp.data.index) {
        this.$message.success('上传成功')
        this.$emit('confirm', resp.data.index)
    } else {
        this.$message.error('获取上传结果失败')
    }
    this.isUploading = false
}).catch(() => {
    this.isUploading = false
})