前端使用 axios put 请求进行文件上传, Node 服务端报错 Error: Multipart: Boundary not found.
server is running . http://:::3000
Error: Multipart: Boundary not found
at new Multipart (/home/w/my/project-exercise/FileServer/node_modules/busboy/lib/types/multipart.js:58:11)
at Multipart (/home/w/my/project-exercise/FileServer/node_modules/busboy/lib/types/multipart.js:26:12)
at Busboy.parseHeaders (/home/w/my/project-exercise/FileServer/node_modules/busboy/lib/main.js:71:22)
at new Busboy (/home/w/my/project-exercise/FileServer/node_modules/busboy/lib/main.js:22:10)
at multerMiddleware (/home/w/my/project-exercise/FileServer/node_modules/multer/lib/make-middleware.js:33:16)
at Layer.handle [as handle_request] (/home/w/my/project-exercise/FileServer/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/w/my/project-exercise/FileServer/node_modules/express/lib/router/index.js:317:13)
at /home/w/my/project-exercise/FileServer/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/w/my/project-exercise/FileServer/node_modules/express/lib/router/index.js:335:12)
at next (/home/w/my/project-exercise/FileServer/node_modules/express/lib/router/index.js:275:10)
Node 服务端使用其他方式上传测试通过, 前端 vue上传代码如下
let file = document.getElementById('file').files[0]
console.log(file)
this.axios.put('http://192.168.xxx.xxx:3000/file_upload_put', file, {
headers: {
'Content-Type': 'multipart/form-data'
},
transformRequest: [function (data) {
return data
}],
onUploadProgress: progressEvent => {
let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
console.log('complete: ', complete)
}
})
.then((response) => {
if (response.status === 200) {
console.log('success upload')
}
})
解决方式
没有传递 formData 对象导致服务端报错, put 请求中把 file 对象添加到 formData , 直接传递 formData 对象就可以正常上传了
let file = document.getElementById('file').files[0]
console.log(file)
let formData = new FormData()
formData.append('image', file)
this.axios.put('http://192.168.xxx.xxx:3000/file_upload_put', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
transformRequest: [function (data) {
return data
}],
onUploadProgress: progressEvent => {
let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
console.log('complete: ', complete)
}
})
.then((response) => {
if (response.status === 200) {
console.log('success upload')
}
})