javascript - 用vue上传文件，nodejs接收

Question

我正在尝试使用 vuejs 将文件上传到服务器，实际上我不希望表单处理文件并上传它，我阻止提交并自己处理一些逻辑，所以一开始我想做一些简单的事情，只要检查它是否是 pdf，如果一切正常，它应该指向为 NodeJS 服务器定义的本地主机中的/upload

<template>
  <div id="app">
    <form>
      <h2>Select a file</h2>
      <input id="inputVal" type="file" @change="onFileChange">
      <button @click.prevent="sendFile()">Send</button>
    </form>
  </div>
</template>

<!-- Javascript -->
<script>
  export default {
    name: 'app',
    data() {
      return {
        file: ''
      }
    },
    methods: {
      onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) {
          return;
        }
        var ext = files[0].name.split('.').pop();
        if(ext === 'pdf') {
          this.createFile(files[0]);
        }
        else {
          this.file = '';
          this.clearFileInput(document.getElementById('inputVal'));
        }
      },
      createFile(file) {
        this.file = file;
      },
      clearFileInput(ctrl) {
        try {
          ctrl.value = null;
        } catch(ex) { }
        if (ctrl.value) {
          ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
        }
      },
      sendFile() {
        var vm = this;
        if(this.file !== '') {
         this.$http.post('http://localhost:3000/upload',{params: vm.file, headers: {'Content-Type': 'multipart/form-data'}})
        .then(response => {
          // JSON responses are automatically parsed.
          //
        }, error => {
          //this.errors.push(e)
        });
      }
    }
  }
}
</script>

在我的服务器端，我收到未定义的消息，我真的不知道为什么，我只是想看看我是否真的在服务器中有任何文件，如果是，我想将它保存在服务器端，任何帮助那个？

我刚刚在/upload 端点上做了这个:

router.post('/upload',function(req,res) {
  console.log(res.body);
})

Answer 1

你会得到Files来自输入的对象不是实际文件而是对文件的特殊引用，您需要使用 FileReader或 FormData要获取实际文件并发送它，请尝试这样的操作

var data = new FormData();
var pdf = e.target.files[0];
data.append('file',pdf)
this.$http.post('http://localhost:3000/upload',{params: data}, headers: {'Content-Type': 'multipart/form-data'}})