مشکل در post کردن دیتا به سرور

- 9 ماه پیش
محمد ( 2177 تجربه )
9 ماه پیش

سلام من مشکل دارم میخام دیتا را که از سمت سرور با این فرمت برای من ارسال میشه بفرستم
این چیزی هست که در پست من در قسمت 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;
برای ارسال پاسخ باید وارد سایت شوید