Question

我目前正在研究ReactJS网络应用。我正在尝试将图像上传到文件夹并将文件名存储在数据库中，以便我可以使用它。

到目前为止一切正常，但我唯一的阻止是将文件传输到文件夹。

这里是ImageUpload组件：

    import * as React from 'react';

   export class ImageUpload extends React.Component<any, any> {
    constructor(props : any) {
        super(props);
        this.state = { file: '', imagePreviewUrl: '' };
    }

    _handleSubmit(e : any) {
        e.preventDefault();

        // TODO: do something with -> this.state.file
        alert(this.state.file.name);
        this.state.file.copy("C:\\Documents");
    }

    _handleImageChange(e : any) {
        e.preventDefault();

        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
            this.setState({
                file: file,
                imagePreviewUrl: reader.result
            });
        }

        reader.readAsDataURL(file)
    }

    render() {
        let { imagePreviewUrl } = this.state;
        let $imagePreview = null;
        if (imagePreviewUrl) {
            $imagePreview = (<img src={imagePreviewUrl} />);
        } else {
            $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
        }

        return (
            <div className="previewComponent">
                <form onSubmit={(e) => this._handleSubmit(e)}>
                    <input className="fileInput"
                        type="file"
                        onChange={(e) => this._handleImageChange(e)} />
                    <button className="submitButton"
                        type="submit"
                        onClick={(e) => this._handleSubmit(e)}>Upload Image</button>
                </form>
                <div className="imgPreview">
                    {$imagePreview}
                </div>
            </div>
        )
    }
}

正如您所看到的，我正在尝试将文件复制或移动到 C：\ Documents 。我没有设法找到将文件正确移动到文件夹的解决方案。

有什么建议吗？

Answer 1

如果要上传图像并将其保存到数据库，则需要一个接受FormData的API，请参阅Form Data Usage，然后在服务器上将该文件保存到目标。为此，您可以使用ExpressJS和中间件来处理multipart upload - 从那里您可以使用NodeJS函数将文件保存到本地目的地。

仅使用反应是不可能的。

如何将图像文件移动到文件夹？

1 个答案: