在VueJS中在数据库内发送图像

Question

我正在使用Vue.js

我有2个文件：

RegisterVehcile.vue和UserRouter.js

我正在尝试将图像推送到数据库中，但出现500错误，并说我的诺言中存在错误

我无法理解为什么。我不知道我的图像处理方法是否很好。

在添加图像之前，一切都正常运行

RegisterVehicle.vue

<template>
  <div class="register">
    <h4>Register Vehicle</h4>
    <form>
      <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
      <b-form-input type="text" v-model="marque" placeholder="Marque" required/>
      <b-form-input type="text" v-model="serial_number" placeholder="Serial Number" required/>
      <b-form-input type="color" v-model="color" placeholder="Color" required/>
      <b-form-input type="text" v-model="nb_plate" placeholder="Number Plate" required/>
      <b-form-input type="text" v-model="nb_kilometer" placeholder="Number of kilometer" required/>
      <b-form-input type="date" v-model="purchase_date" placeholder="Purchase date " required/>
      <b-form-input type="price" v-model="price" placeholder="Price" required/>

      <b-button type="submit" @click="handleSubmit">Add Vehicle</b-button>
    </form>
  </div>
</template>

<script>
    import axios from "axios";
    import router from "../router";

    export default {
        name: "RegisterVehicle",
        props: ["nextUrl"],
        data() {
            return {
                file: "",
                marque: "",
                serial_number: "",
                color: "",
                nb_plate: "",
                nb_kilometer: "",
                purchase_date: "",
                price: ""
            };
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();

                let url = "http://localhost:3000/api/vehicle";

                let vehicle = {
                    file: this.file,
                    marque: this.marque,
                    serial_number: this.serial_number,
                    color: this.color,
                    nb_plate: this.nb_plate,
                    nb_kilometer: this.nb_kilometer,
                    purchase_date: this.purchase_date,
                    price: this.price
                };

                axios
                    .post(url, vehicle)
                    .then(response => {
                        localStorage.setItem(
                            "vehicle",
                            JSON.stringify(response.data.vehicle)
                        );
                        localStorage.setItem("jwt", response.data.token);
                        console.log(response.data.vehicle);
                        if (localStorage.getItem("jwt") != null) {
                            alert("Add vehicle");
                            this.$router.push("/offer");
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },

            handleFileUpload() {
                this.file = this.$refs.file.files[0];
            }
        }
    };
</script>

UserRouter.js

router.get('/api/vehicle', (req, res) => {
  dbConn.query('SELECT * FROM vehicles', function (error, results, fields) {
    if (error) {
      throw error;
    }
    return res.json({error: false, data: results, message: 'vehicles list.'});
  });
});


router.post('/api/vehicle', (req, res) => {
  vehicle = [
    req.body.image,
    req.body.marque,
    req.body.serial_number,
    req.body.color,
    req.body.nb_plate,
    req.body.nb_kilometer,
    req.body.purchase_date,
    req.body.price
  ];
}