Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数

场景:现有向视频上传接口同时发送视频文件和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测试一下。
file
使用POST请求测试接口,在Body中携带媒体文件(file)和媒体json数据(media),需要特别注意的是,对于json字段需要将CONTENT-TYPE设置为application/json,否则SpringBoot将会报错,如下图所示:
file
至此,接口功能测试通过。
file

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
})

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

目录