Question

我正在尝试使用提取API在Vue应用上上传简单文件。

在后端，有一个简单的express.js服务器在路由上侦听。我在Vue应用程序的后端使用代理。

vue.config.js

module.exports = {
    devServer: {
        proxy: "http://localhost:3344"
    }
}

vue应用

<template>
  <form @submit.prevent="sendFile" enctype="multipart/form-data">

    <div class="field">
      <input
        type="file"
        ref="files"
        class="file-input"
        @change="selectFiles"
      />
    </div>

    <div class="field">
      <button class="button is-info">
        Send
      </button>
    </div>

  </form>
</template>

<script>
export default {
  name: "Upload",

  data() {
    return {
      file: '',
    }
  },

  methods: {
    selectFiles() {
      this.file = this.$refs.file.files[0];
    },

    async sendFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      try {
        await fetch('/upload', {
          method: 'post',
          body: formData,
        })
      } catch(err) {
        console.log(err)
      }
    }
  }
}
</script>

表达应用

const express = require('express');

const app = express();

app.post('/upload', (req, res) => {
  res.json({received: 'yes'})
})

app.listen(3344, () => console.log("running on localhost:3344"))

我正在使用Firefox和Safari作为测试浏览器。我在MacOS 10.14的localhost上运行应用程序。当我尝试发送不带文件的表单时，它在两种浏览器中都能正常工作。但是，当我选择一个文件并按send时，该请求在Firefox中失败，并且在控制台中出现TypeError: "NetworkError when attempting to fetch resource."错误。在Vue应用程序控制台上，我得到Proxy error: Could not proxy request /upload from 0.0.0.0:8080 to http://localhost:3344. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (EPIPE).

但是，这在Safari上不会发生，并且可以按预期运行。

我以为可能是firefox版本或某些扩展，但是我运行了没有插件的夜间版本，但仍然失败。我也尝试使用axios代替fetch api，但是发生了同样的问题。

Answer 1

奇怪的是，当我在快速后端上添加中间件时，此问题已解决：


const express = require('express');
const multer = require('multer');

const app = express();

const upload = multer({
    dest: './uploads/'
})

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({received: 'yes'})
})

app.listen(3344, () => console.log("running on localhost:3344"))

我仍然不知道为什么没有firefox中的中间件就无法运行，但是在野生动物园中却可以。

在Firefox中，包含多部分数据的提取请求失败，但野生动物园失败

1 个答案: