2016-11-19 73 views
0

所以我真的很难让文件上传工作。我认为这不会像以前那样具有挑战性。反应节点文件上传器

<input type="file" id="server-avatar-file" className="file-input" accept=".jpg,.jpeg,.png" onChange={this.handleChange} style={{position: "absolute", top: "0px", left: "0px", width: "100%", height: "100%", opacity: "0", cursor: "pointer"}} /> 

这里是我的提交表单数据:

handleSubmit = (event) => { 
     event.preventDefault(); 

     axios.post('/api/v1/testing/upload', 
      this.state.file) 
      .then(function (response) { 
      console.log(response); 
      }) 
      .catch(function (error) { 
      console.log(error); 
     }); 
    }; 

我用打杂,多一切我能想到的

所以我会用简单的HTML元素开始。

但是我相信这个问题是源于我的前端没有发送所有正确的信息到我的后端。

这就是this.state.file有,因为它的价值:

enter image description here

我明白bodyParser在节点不解析的文件类型,我不熟悉如何分析它们在服务器上。我想通过上传到我的文件系统来测试它,但是想要转到生产中的CDN,所以我很容易做到这一点,这将非常棒!

+1

您是否尝试过使用FormData实例而不是原始的'File'对象?那个'busboy','multer'等应该可以正常工作。 – mscdex

+0

哇,我觉得真的很愚蠢,就是这样,你会认为我会在所有的搜索结果中都遇到这种情况。 非常感谢! –

回答

1

busboy,multer和其他多部分解析模块需要正确格式化的多部分/表格数据请求。使用axios发送类似请求的一种简单方法是改为传递FormData实例而不是原始FileBlob实例作为数据参数。