首页 > 解决方案 > 在 React with Meteor 中上传图片

问题描述

如何将上传图片添加到 React 表单?

<form onSubmit={this.handleSubmit.bind(this)} >
                <label>Titre</label>
                <input className="form-control" 
                type="text"
                ref="title"
                name="titleLoi"
                value={this.state.titre}
                onChange={this.handleChange.bind(this)}/>

                <label>Description</label>
                <input className="form-control"
                type="text"
                ref="abstract"
                name="abstractLoi"
                value={this.state.abstract}
                onChange={this.handleChange.bind(this)}/>

                <button className="btn btn-primary">Enregistrer</button>
            </form>

我在 Atmosphere 上看到了一个包 okgrow:image-upload。是否仅使用外部软件包才能实现此目的?

标签: reactjsmeteor

解决方案


通过添加 enctype 属性并添加文件输入来设置表单以处理文件上传,这将允许您选择要上传的文件:

<form enctype="multipart/form-data" onSubmit={this.handleSubmit.bind(this)}>
    <input className="form-control"
        type="file"
        ref="uploader"
        name="image"
        onChange={this.uploadFiles.bind(this)}/>
</form>

您如何设置此样式并在服务器上处理此文件是不同的问题。


推荐阅读