javascript 简单文件上传不适用于Vue.js & Flask框架

hgc7kmma  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(97)

我在通过FormData从Vue.js上传图片到我的Python flask后端时遇到了问题。我有一个node.js服务器来处理Vue.js(Nuxt),所以我可以做SSR。最小堆栈设置:

Vue.js (Nuxt) frontend --> node.js proxy server ---> Python flask backend
    • 一米一米一**
const formData = new FormData()
formData.append('image', file)
formData.append('data', JSON.stringify(upcomingReq))

const resp = await this.$axios.post('/api/receive-file', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
    • server.js**(只是node.js服务器的代理函数的一个片段,该服务器为nuxt应用提供服务)
app.use('/api', proxy({
  target: API_URI,
  changeOrigin: true,
  // logLevel: 'debug',
  onProxyReq(proxyReq, req, res) {
    if (req.session.authToken) {
      proxyReq.setHeader('Authorization', 'Bearer ' + req.session.authToken)
    }
  },
}))
    • app.py**(接收文件的控制器)
@v1.route('/api/receive-file', methods=['GET', 'POST'])
@auth_required
def receive_file():
    print('in here')
    return jsonify({'hi': 'ok'})

这是我得到的错误:


3000是节点服务器,5000是flask服务器)
另外,Flask返回了一个200,好像一切都很好。在检查Flask request时,文件在那里没有问题。
我不知道为什么响应似乎失败了,或者正如错误所说,管道被破坏了。

vjrehmav

vjrehmav1#

对于任何发现这个问题并寻找答案的人来说,通过ngrok运行localhost可以解决这个问题。
看起来有头丢失,我相信一个重要的是Connection: keep-alive,当服务只通过本地主机。

相关问题