Question

所以目前我正在尝试上传文件，并将其保存在Google云端。但我仍然坚持如何使用React-Redux获取输入文件。

基本上，我的后端部分已经完成，我使用HTTPie使用此命令对其进行了测试 HTTP localhost:8000/v1/... @(file_path) 它完美无缺。

现在我使用输入标签后： <input type="file" onChange=""> 我不知道如何获取用户选择的file_path。我甚至不知道我是否可以使用这种方法获取上传的文件。

谢谢

Answer 1

您无法通过方法<input type="file" onChange={this.handleChangeFile.bind(this)}>

处理onChange文件

handleChangeFile(event) {
  const file = event.target.files[0];
  let formData = new FormData();
  formData.append('file', file);
  //Make a request to server and send formData
}

Answer 2

结帐this blog，通过示例很好地说明了上传功能。下面是上面博客的上传代码：

handleUploadedFiles = files => {
        var reader = new FileReader();
        reader.onload = (e) => {
            //Split csv file data by new line so that we can skip first row which is header
            let jsonData = reader.result.split('\n');    
            let data = [];
            jsonData.forEach((element, index) => {
                if(index) {
                     //Split csv file data by comma so that we will have column data
                    const elementRaw = element.split(',');
                    console.log(element, index);
                    if(element) {
                        let param = {
                            'id' : elementRaw[0],
                            'name' : elementRaw[1],
                            'age' : elementRaw[2],
                            'address' : elementRaw[3]
                        }
                        data.push(param);
                    }
                }
            });
        }
        console.log("TCL: Dashboard -> reader.readyState", reader.readyState)          
        reader.readAsText(files[0]);
    }

Answer 3

使用 AXIOS 和 FORMIK 的完整示例

['asp100', 'asp101', 'asp105', 'asp106', 'asp210', 'asp211']

希望对你有帮助

如何使用React上传文件？

3 个答案: