Question

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

<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>

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

我刚刚在/ 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'}})

使用vue上传文件并接收nodejs

1 个答案: