"无法使用 vueJS 提交配置文件更改"

Question

对于我的一个课程项目，我需要创建一个社交网络。 为此，我需要显示用户个人资料，并且用户可以修改他的个人资料，包括头像。

为此，我必须使用 NodeJS、Mysql 和 VueJS。

对于后端部分，我编写了以下代码：

multer-config.js ：

const MIME_TYPES = {
  'images/jpg': 'jpg',
  'images/jpeg': 'jpg',
  'images/png': 'png',
  'images/gif': 'gif'
};

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, 'images');
  },
  filename: (req, file, callback) => {
    const name = file.originalname.split(' ').join('_');
    const extension = MIME_TYPES[file.mimetype];
    callback(null, name + Date.now() + '.' + extension);
  }
});

module.exports = multer({ storage: storage }).single('images');

配置文件修改控制器：

  const imgURL = `${req.protocol}://${req.get('host')}/images/${
    req.file.filename
  }`;
  const modifyProfileQuery = `UPDATE user SET lastName = "${req.body.lastName}", firstName = "${req.body.firstName}", avatarUrl = "${imgURL}" WHERE id = ${req.body.userId}`;
  if (req.body.userId === req.auth.userId) {
    db.query(modifyProfileQuery, (error, result) => {
      if (!error) {
        return res.status(201).json({ message: 'Sucessfully updated' });
      } else {
        return res.status(400).json({ error });
      }
    });
  } else {
    return res.status(401).json({ message: 'Unauthorized request.' });
  }
};

这是使用 vueJS 的前面部分：

  <div class="user-profile" v-for="profile in userProfile" :key="profile.id">
    <h1 class="user-profile__title">
      Profil de {{ profile.firstName }} {{ profile.lastName }}
    </h1>
    <div class="profile-picture">
      <img
        :src="profile.avatarUrl"
        :alt="
          'Photo de profil de ' + profile.firstName + ' ' + profile.lastName
        "
        class="profile-picture__image"
      /><br />
      <input
        type="file"
        name="avatar"
        id="avatar"
        v-if="modifyProfile === true"
        :change="userInfo.avatarUrl"
      />
      {{ userInfo.avatarUrl }}
    </div>
    <div class="user-profile__info">
      <input
        type="text"
        class="user-profile__info-modify"
        name="firstName"
        v-model="userInfo.firstName"
        v-if="modifyProfile === true"
      />
      <input
        type="text"
        class="user-profile__info-modify"
        name="lastName"
        v-model="userInfo.lastName"
        @change="setNewLastName"
        v-if="modifyProfile === true"
      />
      <p class="user-profile__info-txt" v-else>
        {{ profile.firstName }} {{ profile.lastName }}
      </p>

      <p class="user-profile__info-txt">Email : {{ profile.email }}</p>

      <h3>Informations d'inscription</h3>
      <p class="user-profile__info-txt">
        Inscrit depuis le : {{ profile.signup_date }}
      </p>
    </div>
    <div class="user-profile__modify" v-if="profile.id == userId">
      <p
        @click="modifyProfile = true"
        v-if="modifyProfile === false"
        class="text-link"
      >
        Modifier le profil
      </p>

      <p
        @click="updateProfile(this.$route.params.userId)"
        v-if="modifyProfile === true"
        class="text-link"
      >
        Envoyer
      </p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import axios from 'axios';

const userSessionData = JSON.parse(localStorage.getItem('userSession'));
const sessionToken = userSessionData.token;
if (sessionToken) {
  axios.defaults.headers.common['Authorization'] = 'Bearer ' + sessionToken;
}

export default {
  name: 'Profile',
  data() {
    return {
      userId: '',
      modifyProfile: false,
      userInfo: {
        firstName: '',
        lastName: '',
        avatarUrl: '',
        userId: JSON.parse(userSessionData.userId)
      }
    };
  },
  beforeMount() {
    this.getProfile(this.$route.params.userId);
    this.getCurrentUserId();
  },
  methods: {
    updateProfile: function (userId) {
      axios
        .put(`http://localhost:3000/api/user/${userId}`, this.userInfo)
        .then(() => this.$router.go())
        .catch((error) => console.log(error));
    },

    getCurrentUserId: function () {
      this.userId = userSessionData.userId;
    },
    getProfile: function (userId) {
      this.$store.dispatch('getUserProfile', userId);
    },

    checkUser: function (currentUserId) {
      if (currentUserId == localStorage.userId) {
        return true;
      } else {
        return false;
      }
    }
  },
  computed: {
    ...mapState(['userProfile'])
  }
};
</script>

<style scoped>
.user-profile {
  width: 90%;
  margin: 10px auto;
  padding: 10px 0;
  background: rgba(138, 185, 241, 0.4);
  text-align: center;
  font-family: 'poppins';
}

.user-profile .user-profile__info .user-profile__info-modify {
  margin-top: 10px;
  margin-right: 10px;
  padding: 10px;
}

.text-link {
  width: 10%;
  margin: 0 auto;
  padding: 10px;
  background-color: #003171;
  color: white;
}

.text-link:hover {
  cursor: pointer;
}
</style>

我的问题是当我单击提交按钮时，出现 500 内部错误。 我找不到错误来自哪里。 你能帮助我吗 ？

谢谢 ：）