Ruby on rails 使用react和rails上传图像
我正在尝试使用react将图像上传到rails活动存储中。 我的组成部分是:Ruby on rails 使用react和rails上传图像,ruby-on-rails,reactjs,form-data,Ruby On Rails,Reactjs,Form Data,我正在尝试使用react将图像上传到rails活动存储中。 我的组成部分是: import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import User from './../../Assets/user.png'; import { addAvatar } from './../../action
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import User from './../../Assets/user.png';
import { addAvatar } from './../../actions/userAction';
class UploadAvatar extends Component {
state = {
image: null,
};
fileSelectHandler = (e) => {
this.setState({
image: e.target.files[0],
});
};
fileUploadHandler = () => {
if (this.state.image) {
console.log(this.state.image, this.props.userId);
const fd = new FormData();
fd.append('avatar', this.state.image, this.state.image.name);
this.props.addAvatar({ avatar: fd, userId: this.props.userId });
}
};
render() {
return (
<div className="avatar ">
<div className="avatar-content shadow-lg">
<div className="avatar-pic">
<img src={User} alt="userpic" />
</div>
<p>ADD PHOTO</p>
<input type="file" onChange={this.fileSelectHandler} />
<div className="avatar-foot">
<button type="button" className="skip">
SKIP
</button>
<button type="button" onClick={this.fileUploadHandler} className="submit">
SUBMIT
</button>
</div>
</div>
</div>
);
}
}
const mapStateToProps = store => ({
userId: store.userReducer.userId,
userEmail: store.userReducer.userEmail,
});
const mapDispatchToProps = dispatch =>
bindActionCreators(
{
addAvatar,
},
dispatch,
);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(UploadAvatar);
但在rails方面,我在avatar中得到的是空对象。不知道为什么?
请看一下rails侧的屏幕截图
但从邮递员,如果我试图上传它是工作良好。
是否有其他上传图像的方法。Ajax请求在哪里?@ArupRakshit我已经编辑了这个问题。请看一下我的
ajax.js
。你从Postnan那里得到了什么?
/* eslint-disable no-console no-param-reassign */
let CLIENT_URL = 'http://localhost:3000/api/v1';
function getDefaultOptions() {
return {
method: 'GET',
// credentials: "include",
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
};
}
function buildParam(params, asJSON = true) {
if (asJSON) {
return JSON.stringify(params);
}
const fD = new FormData();
Object.keys(params).forEach((param) => {
fD.append(param, params[param]);
});
return fD;
}
function ajax(uri, options = {}) {
const defaultOptions = getDefaultOptions();
options.method = options.method ? options.method : defaultOptions.method;
if (!options.formType) {
options.headers = options.headers ? options.headers : defaultOptions.headers;
}
options.credentials = options.credentials ? options.credentials : defaultOptions.credentials;
if (options.body && !options.formType) {
options.body = buildParam(options.body);
}
uri = uri.startsWith('/') ? uri : `/${uri}`;
return fetch(`${CLIENT_URL}${uri}`, options)
.then(data => data.json())
.catch(errors => console.log(errors));
}
export default ajax;