React JS 图片上传器 |更改背景图像

Question

我正在尝试创建背景图片更新程序/上传程序组件。

默认情况下设置了图像，但是，如果用户想要更新背景图像，我想更新状态并存储图像。

目前的研究表明我需要使用 <input type="file" /> 元素来启用上传对话框。

有没有其他方法可以不使用输入元素？如果用户要单击 <button> 元素以显示对话框，然后更新背景图像。

export default class ChangeBackground extends React.Component {
    constructor() {
        super();
        this.state = {
            backgroundImage: ''
        }
    }

    handleBackgroundChange() {
        let backgroundImage = backgroundImage
        this.setState({
            backgroundImage: backgroundImage
        });
    }

    render() {
        return (
            <div className="change-bg-wrap">
                <input type="file" accept="image/*" />
                <button>
                    <i className="fa fa-picture-o" style={{fontSize: 20}}></i>
                </button>
            </div>
        )
    }
}

Answer 1

修改了我之前的回答。我修改了一些位以使其适用于我的项目。请参阅下面的代码。

class ChangeBackground extends React.Component {
    constructor() {
        super();
        this.state = {
            backgroundImage: 'START'
        }

        this.handleBackgroundChange = this.handleBackgroundChange.bind(this);
    }

    handleBackgroundChange(e) {
        const reader = new FileReader();
        const file = e.target.files[0];

        this.setState({
          backgroundImage: file.name,
        });
    }

    render() {
        return (
            <div className="change-bg-wrap">
                <input onChange={this.handleBackgroundChange} type="file" accept="image/*" />
                file: {this.state.backgroundImage}
                <button>
                    <i className="fa fa-picture-o" style={{fontSize: 20}}></i>
                </button>
            </div>
        )
    }
}

我添加了构造函数的最后一行来访问 setState。在 handleBackgroundChange 上，我添加了一个文件 reader，您稍后可能想查看该文件，可以通过 e.target 访问该文件。我在渲染函数上添加了一行，只是为了查看状态是否发生变化。

这适用于我的项目，如果它不适用于您的项目，请告诉我，我可以修改它。

Answer 2

用 display: "none" 隐藏输入元素，然后做一些 javascript 这样当按钮被点击时会触发 <input>.

   triggerInput = () => {
        document.querySelector("input[type='file']").click();
    }
   <input type="file" accept="image/*" />
    <button onClick={this.triggerInput}>
        <i className="fa fa-picture-o" style={{fontSize: 20}}></i>
    </button>

见https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

也在 var 中缓存 querySelector 值

编辑：我不认为你可以触发反应事件 click() 这就是我使用原生 js 的原因。如果我错了请纠正我。

React JS 图片上传器 |更改背景图像

React JS Image Uploader | Change Background Image

javascript

image-uploading

reactjs