如何在不使用 multipart/form-data 的情况下使用 reactjs 上传文件？

Question

我正在使用 Stormpath API 并在其 React/Express 样板之上构建一个 Web 应用程序。如何在没有 multipart/form-data 选项的情况下实现？我尝试过使用 multer，但如果不先指定选项，它就无法工作。

这是更新个人资料页面的代码 sn-p。 UserProfilePage 组件将成为 HTML 中的 form 标记。

export default class ProfilePage extends React.Component {

constructor(props) {
    super(props);
    this.state = {resume: 'No Resume Selected'};
    this.changeResume = this.changeResume.bind(this);
}

changeResume(e) {
    var str = e.target.value;
    var n = str.lastIndexOf('\\');
    var result = str.substring(n + 1);
    this.setState({resume: result});
}

render() {
    return (
        <DocumentTitle title="Update Profile">
            <div className="container">
                <div className="row">
                    <div className="col-xs-12">
                        <h3>Update Profile</h3>
                        <hr />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-12">
                        <UserProfileForm>
                            <div className='sp-update-profile-form'>
                                <div className="row">
                                    <div className="col-xs-12">
                                        <div className="form-horizontal">
                                            <div className="form-group">
                                                <label htmlFor="givenName"
                                                       className="col-xs-12 col-sm-4 control-label">Name</label>
                                                <div className="col-xs-12 col-sm-4">
                                                    <input className="form-control" id="givenName" name="givenName" placeholder="Name"
                                                           required="true"/>
                                                    <input className="form-control" id="surname" name="surname"
                                                           style={{display: 'none'}}/>
                                                </div>
                                            </div>
                                            <div className="form-group">
                                                <label htmlFor="email" className="col-xs-12 col-sm-4 control-label">Email</label>
                                                <div className="col-xs-12 col-sm-4">
                                                    <input className="form-control" id="email" name="email" placeholder="Email"
                                                           required="true"/>
                                                </div>
                                            </div>
                                            <div className="form-group">
                                                <label htmlFor="resume"
                                                       className="col-xs-12 col-sm-4 control-label">Resume</label>
                                                <div className="col-xs-12 col-sm-4">
                                                    <label className="btn btn-default btn-file">
                                                        Browse<input key="resume" id="resume" name="resume"
                                                                     type="file" style={{display: 'none'}}
                                                                     onChange={this.changeResume}/>
                                                    </label>
                                                    <span id="resume_filename"
                                                          className="control-label pull-right">{this.state.resume}</span>
                                                </div>
                                            </div>
                                            <div className="form-group">
                                                <label htmlFor="coverletter"
                                                       className="col-xs-12 col-sm-4 control-label">Cover
                                                    Letter</label>
                                                <div className="col-xs-12 col-sm-4">
                                                    <textarea className="form-control" id="coverletter"
                                                              name="coverletter" rows="10"/>
                                                </div>
                                            </div>
                                            <div className="form-group">
                                                <div className="col-sm-offset-4 col-sm-4">
                                                    <p className="alert alert-danger" spIf="form.error"><span
                                                        spBind="form.errorMessage"/></p>
                                                    <p className="alert alert-success" spIf="form.successful">
                                                        Profile Updated.</p>
                                                    <button type="submit" className="btn btn-primary">
                                                        Update
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </UserProfileForm>
                    </div>
                </div>
            </div>
        </DocumentTitle>
    );
}

Answer 1

您可以尝试使用 base64 对图像进行编码并将其作为字符串发送到 API。

您可以通过使用例如。这个https://www.npmjs.com/package/base64-img