Error_ Multipart_ Boundary not foun

224 阅读1分钟

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