前端使用 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') } })
