Spring Cloud Feign MultipartFile文件上传踩坑之路总结
一、前端文件上传
文件上传组件用的是ant-design的a-upload组件,我的界面如下所示:
文件上传请求API:
FileUtils.js
import axios from "axios"
const uploadApi = ({
file, URL, onUploadProgress}) => {
const formData = new FormData()
formData.append('file', file)
return axios.post(URL, formData, {
headers:{
'Content-type': 'multipart/form-data',
},
onUploadProgress // 上传进度回调函数 onUploadProgress(ev))
})
}
export default uploadApi;
需要注意的只有FileUtils.js定义的uploadApi请求函数,其中URL为后端请求接口(“/imageConvert/upload”),文件上传方法必须定义为POST,在headers加入’Content-type’: ‘multipart/form-data’,后端即可用@RequestParam或者@RequestPart + MultipartFile 来接受文件。
FileUpload.vue(无关紧要,用法大致相同,看你自己需求,这里只是提供一个参考范例)
// 自定义文件上传公共函数
// e - 上传组件返回的上传实例,里面包括 file,和一些组件方法
// e.file - 上传的文件实例对象
const customUpload = e => {
let curFile = fileList.value.filter(item => item.uid == e.file.uid)[0]
curFile.status = 'uploading'
uploadApi({
file: e.file,
URL: '/imageConvert/upload',
// uid: 'admin', // 需要更改为用户id,待修改
onUploadProgress: ev => {
// ev - axios 上传进度实例,上传过程触发多次
// ev.loaded 当前已上传内容的大小,ev.total - 本次上传请求内容总大小
// console.log(ev);
const percent = (ev.loaded / ev.total) * 100;
// 计算出上传进度,调用组件进度条方法
e.onProgress({
percent });
}
})
.then(res => {
let curFile = fileList.value.filter(item => item.uid == e.file.uid)[0]
curFile.response = res.data
if(res.data.code == 400) {
curFile.status = 'error'
curFile['error'] = curFile.response.msg
console.error(`文件${
curFile.name}上传失败:${
res.data.msg}`)
} else {
// 通知组件该文