محمد
6 سال پیش توسط محمد مطرح شد
0 پاسخ

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

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

ثبت پرسش جدید

به همدیگه کمک کنیم

به محمد کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام