سلام من مشکل دارم میخام دیتا را که از سمت سرور با این فرمت برای من ارسال میشه بفرستم
این چیزی هست که در پست من در قسمت Body که من post کنم سمت سرور.
{
"username":"0912334455",
"firstname":"ali",
"lastname":"rahmani",
"vehicle":{
"name":"samand",
"pelak":"12 a 334 93"
},
"image":"base64 image"
}
و همین طور تصویر را چطور میتونم آپلود کنم بصورت base64؟
ممنون میشم کدم را یک تصحیح بفرمایید
import React, { Component } from 'react';
import validator from 'validator';
import axios from 'axios';
class DriverAdd extends Component {
constructor(props){
super(props);
this.state = {
fields : {
username : '',
firstname: '',
lastname: '',
image:'',
vehicle: {
name:'',
pelak:''
}
},
errors : {
}
}
}
handleValidation(callback) {
let { fields } = this.state;
let errors = {};
let formIsValid = true;
//username
if(validator.isEmpty(fields.username)){
formIsValid = false;
errors['username'] = "نام کاربری خالی است";
} else if(! validator.isLength(fields.username , { min : 3 , max : 20})) {
formIsValid = false;
errors['username'] = "فرمت نام کاربری اشتباه است";
}
//firstname
if(validator.isEmpty(fields.firstname)){
formIsValid = false;
errors['firstname'] = "نام راننده خالی است";
} else if(! validator.isLength(fields.firstname , { min : 3 , max : 50})) {
formIsValid = false;
errors['firstname'] = "فرمت نام راننده اشتباه است";
}
//lastname
if(validator.isEmpty(fields.lastname)){
formIsValid = false;
errors['lastname'] = "نام خانوادگی راننده خالی است";
} else if(! validator.isLength(fields.lastname , { min : 3 , max : 50})) {
formIsValid = false;
errors['lastname'] = "فرمت نام خانوادگی راننده اشتباه است";
}
//vehicle name
if(validator.isEmpty(fields.vehicle.name)){
formIsValid = false;
errors['name'] = "نام خودرو خالی است";
} else if(! validator.isLength(fields.vehicle.name , { min : 3 , max : 100})) {
formIsValid = false;
errors['name'] = "فرمت نام خودرو اشتباه است";
}
//vehicle pelak
if(validator.isEmpty(fields.vehicle.pelak)){
formIsValid = false;
errors['pelak'] = "پلاک خودرو خالی است";
} else if(! validator.isLength(fields.vehicle.pelak , { min : 3 , max : 100})) {
formIsValid = false;
errors['pelak'] = "پلاک نام خودرو اشتباه است";
}
this.setState({ errors },() => {
return callback(formIsValid)
});
}
handleChange(event) {
let fields = this.state.fields;
let target = event.target;
fields[target.name] = target.value;
this.setState({fields});
}
handleRequest(){
const { username } = this.state.fields;
const { firstname } = this.state.fields;
const { lastname } = this.state.fields;
const { image } = this.state.fields;
const { name } = this.state.fields.vehicle;
const { pelak } = this.state.fields.vehicle;
let officerID = localStorage.getItem('officer_id');
axios({
method : 'post',
url:`http://localhost:4040/officer/${officerID}/driver`,
data : {
username,
firstname,
lastname,
image:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAMgAyAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+uKKT8akt4JLqeOGJTJLIwRFHUk8AUAR0V7N4b+F+m6bbI+oIt9eEZbef3an0A7/AFP6Vo6n8PdC1KAp9jS1fHyyW/yEfgOD+IoA8IorV8S+Hp/DOqyWc7bwBujkAwHU9DWV+NABx60UfjRQAYNdJ8OUjbxlpwl6AuRn+9sbH61zeDU1ldy2F3DcwNsmicOjehBoA+lMcUAVl+GtabX9KiuntZbR2HzJIpAJ9VPcVo3E32eCSUo7hAW2xqWY+wHc0Aea/GdI86U3/LX94Pfb8teZYNbvjPxBP4i1uSaWJrdI/wB3HA4wyAHv7+tYWKADB96KTbRQAten/DXwLG9vHq+oRiRm5t4XGQB/fI7+35+leeaLp51XV7OzzgTyqhI7Ank/lX0ZFCkESxoAiIAqqOgA6CgB+DRzSYoAoA5jxr4Kg8T2byRqseoxrmOUcbv9lvUfyrw6WJ4JXjkUpIhKsp4II6g19MAV4t8U9KXT/E7TRjal1GJTjpu6H+WfxoA478RRSfjRQB0PgHnxhpn/AF0P/oJr3r1oooAO1KOlFFAAvSvKvjL/AMfmmf8AXOT+YoooA84zRRRQB//Z",
vehicle:{
name,
pelak
}
},
config:{ headers : {'Accept': 'application/json','Content-Type':'application/json'}}
})
.then(response => {
console.log('success');
this.props.history.push(`/driver`);
})
.catch(error => {
console.log(error);
})
}
handleSubmit(event) {
event.preventDefault();
this.handleValidation((valid) => {
if(valid) this.handleRequest()
})
}
render() {
const { username }= this.state.fields;
const { firstname }= this.state.fields;
const { lastname } = this.state.fields;
const { image } = this.state.fields;
const { name } = this.state.fields.vehicle;
const { pelak } = this.state.fields.vehicle;
const { errors } = this.state;
return (
<div>
<div className="content-wrapper">
<h4>ایجاد راننده</h4>
<hr/>
<form onSubmit={this.handleSubmit.bind(this)}>
<div className="col-md-3">
<div className="form-group">
<label>نام کاربری:</label>
<input
type="text"
className={["form-control" , errors["username"] ? 'is-invalid' : ''].join(' ')}
name="username"
value={username}
onChange={this.handleChange.bind(this)}
placeholder="نام کاربری را وارد نمایید"/>
<span className="invalid-feedback rtl" style={{ display : errors["username"] ? 'block' : 'none'}}>{errors["username"]}</span>
</div>
<div className="form-group">
<label>نام راننده:</label>
<input
type="text"
className={["form-control" , errors["firstname"] ? 'is-invalid' : ''].join(' ')}
name="firstname"
value={firstname}
onChange={this.handleChange.bind(this)}
placeholder="نام راننده را وارد نمایید"/>
<span className="invalid-feedback rtl" style={{ display : errors["firstname"] ? 'block' : 'none'}}>{errors["firstname"]}</span>
</div>
<div className="form-group">
<label>نام خانوادگی راننده:</label>
<input
type="text"
className={["form-control" , errors["lastname"] ? 'is-invalid' : ''].join(' ')}
name="lastname"
value={lastname}
onChange={this.handleChange.bind(this)}
placeholder="نام خانوادگی راننده را وارد نمایید"/>
<span className="invalid-feedback rtl" style={{ display : errors["lastname"] ? 'block' : 'none'}}>{errors["lastname"]}</span>
</div>
<div className="form-group">
<label>نام خودرو:</label>
<input
type="text"
className={["form-control" , errors["name"] ? 'is-invalid' : ''].join(' ')}
name="name"
value={name}
onChange={this.handleChange.bind(this)}
placeholder="نام خودرو را وارد کنید"/>
<span className="invalid-feedback rtl" style={{ display : errors["name"] ? 'block' : 'none'}}>{errors["name"]}</span>
</div>
<div className="form-group">
<label>شماره پلاک:</label>
<input
type="text"
className={["form-control" , errors["pelak"] ? 'is-invalid' : ''].join(' ')}
name="pelak"
value={pelak}
onChange={this.handleChange.bind(this)}
placeholder="شماره پلاک خودرو را وارد کنید"/>
<span className="invalid-feedback rtl" style={{ display : errors["pelak"] ? 'block' : 'none'}}>{errors["pelak"]}</span>
</div>
<div className="form-group">
<label>تصویر راننده</label>
<input type="file" className="form-control-file" />
</div>
<div className="form-group">
<button className="btn btn-outline-primary btn-sm" type="submit">ذخیره مشخصات</button>
</div>
</div>
</form>
</div>
</div>
);
}
}
export default DriverAdd;
به محمد کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟