javascript - 如何在 React 中保存文件对象到状态？

Question

我正在尝试为在模式之间传递的文件对象设置状态，然后将其上传到服务器。 以下是我尝试实现的代码。

 const state = {
        selectedDocument: {
            file: {},
        },
        selectedFile: new File([''],''),
    };  //state init in constructor 

  //method being called upon modal close and passes the selected file object.

 openUploadDocumentModal(files) {
    console.log('files', files); //getting the file object here.

    const ds = new File([files[0]], files[0].name);
    //tried setting directly doest work.
    this
    .setState({
        selectedDocument: {
            file: new File([files[0]], files[0].name),
        },
        selectedFile: new File([files[0]], files[0].name),
    });

    //tried setting using the react update addon, doesnt work
    this
    .setState(prevState => update(prevState,
        {
            selectedFile: { $set: new File([files[0]], files[0].name)}, // trying to set the file file here, get {} on output
            showAddDocumentModal: { $set: false },
            showUploadDocumentModal: { $set: true },
        }
    ));
}

Answer 1

设置状态为:

const state = {
        selectedDocument: {
            file: null,
        },
        selectedFile: null,
    };

然后，将状态设置为:

this
    .setState({
        selectedDocument: {
            file: files[0],
            //files is a FileList variable, either obtained from event.target.files if obtained from input 
            //or event.dataTransfer.files if obtained from drag and drop 
            //or any other method
        },
        selectedFile: files[0],
    });

就这么简单!