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
发布于 作者 natukiHw分类 笔记存档标签 json、SpringBoot、Vue项目、Web开发、传参、文件流
