引言

springboot后端接口类型：post，其它接口信息如下图

后端接口的实现

代码示例

• post 请求头改成’Content-Type’: ‘multipart/form-data’
• 用new FormData() 方式去传对象数据

1. axios封装请求

   import request from '@/utils/request'
   export function uploadImage(data){return request({url: '/uploadImage',method: 'post',headers: {'Content-Type': 'multipart/form-data'},data: data})
   }
   

2. vue界面上传文件代码

   • http-request:覆盖默认的上传行为，可以自定义上传的实现，绑定一个function就行了

   我这里增加了回显功能，就是el-image这个标签

   
   将文件拖到此处，或点击上传
   

3. 绑定的方法

   一定要注意，传的对象是new FormData()，否则会报错的

   uploadArticleCover(param){console.log('进入了自定义上传')let formData = new FormData();formData.append('file',param.file)formData.append('pictureCategory','articleCover')uploadImage(formData).then(res =>{console.log("上传完成")console.log(res.data)this.articleCoverCallbackUrl = res.data})
   }
   

4. 结果示例

   

   

总结

本篇文章只是当作记录，文件的上传只完成了简单的功能，如果有其它需求需要后面自己加上