Ant-Design上载如何将文件上载到项目文件中的目录

时间:2017-10-13 18:23:01

标签: reactjs file-upload upload components antd

我一直在尝试使用Ant Design Upload组件将文件从我的计算机上传到我的项目目录中。一旦上传,我可以随心所欲地做任何事情,但我一再得到这个错误:

POST file:///home/usr/app/uploadedFiles net::ERR_FILE_NOT_FOUND

我不知道为什么它说'找不到文件',因为我只想指定我提供的文件路径作为我上传的位置。在文档中,它指定'action'是您要上传的任何内容的URL,但我不明白为什么文件路径会导致任何问题。他们使用XMLHttpRequest();作为上传文件的后端。

您可以找到antd上传文档here

重要的是要注意,尽管存在错误,但新文件仍会出现在上传下方的文件列表中,并被添加到该状态的fileList中。问题是我需要将这些文件保存在项目本身的目录中,而不是暂时保存在我的组件中。

我的相关代码如下。我当然正在使用React。

  uploadedBundle = (info) => {
    console.log(info)
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      console.log(info);
    } else if (info.file.status === 'error') {
      console.log(info.fileList);
    }
    this.setState({
      fileList: info.fileList,
      size: +info.file.size
    })
  }
  render() {
    const uploads = {
      action: __dirname + '/uploadedFiles',
      listType: 'picture',
      defaultFileList: this.state.fileList,
      onChange: this.uploadedBundle
      // customRequest: this.uploadedBundle
    };
    return (
      <Upload {...uploads}>
        <Button className='modal-button login-form-button'>
          <Icon type="upload">Upload A Study</Icon>
        </Button>
      </Upload>
    )
  }

1 个答案:

答案 0 :(得分:0)

您必须在本地PC上创建任何NodeJs服务器才能执行此操作