Vue.js，尝试异步上传单个文件（Vue.js / Node.js）答案

【问题标题】：Vue.js, try to upload a single file asynchonously (Vue.js / Node.js)Vue.js，尝试异步上传单个文件（Vue.js / Node.js）
【发布时间】：2017-11-29 21:21:20
【问题描述】：

我的目标看起来很简单，但我尝试使用 Vue.js（例如 axios）异步上传单个文件。只要我不尝试在服务器端处理上传，它似乎就可以工作。当我“插入”我的服务器代码时，我收到错误 500，并且不知道发生了什么。

我的 HTML：

<form action="#" enctype="multipart/form-data">
    <input type="file" name="files[]" v-on:change="onFileChange">
</form>

我的 Vue.js 脚本：

onFileChange: function(event) {
  var image = new Image();
  var reader = new FileReader();

  reader.addEventListener('load', function(){
    console.log('file readed : ');

    axios.post('/upload_file', reader.result, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
});
reader.readAsDataURL(event.target.files[0]);

我的 Node.js 服务器代码：

router.post('/upload_file', function(req, res) {
  var form = new formidable.IncomingForm();
  form.IncomingForm().parse(req) // this line create Error #500
    .on('file', function(name, file) {
        console.log('Got file:', name);
    })
    .on('field', function(name, field) {
        console.log('Got a field:', name);
    })
    .on('error', function(err) {
        console.log('Got a error:');
        next(err);
    })
    .on('end', function() {
        res.end();
    });
  res.end();
});

我花了一天时间，文件上传只是我的噩梦，任何帮助将不胜感激（对不起我的英语）。

【问题讨论】：

标签： node.js file-upload vue.js

【解决方案1】：

我不熟悉节点部分。但在 Vue 中我会这样做：

onFileChange: function(event) {
    let reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.addEventListener('load', function(data) {
    axios.post('/upload_file', {
        data: data.target.result
    });
});

所以基本上在文件读取器事件侦听器函数中添加“data”作为参数，并添加“data.target.result”来传输文件数据。

【讨论】：