serii81
@serii81
Я люблю phр...

Почему req body пустой в nuxt?

Добрый день.
Уже сделал несколько страниц для админки, только посылала данные через объект, и проблем не было. Данные сохраняются в базу данных. Я к тому, что вся цепочка работает.

Теперь, добавил старницу, где нужно загружать картинку.
На сервере уже приготовил multer.

Тут хочу через formData загрузить данные и там уже через multer добавить картинку в папку, и прописать название в базу данных.

Только есть проблема, req.body пустой.

HMTFXdB.png

Еще я использую как дополнение elemen-ui.

<template lang="pug">
  .admin-main
    h2 Create new
    el-form.demo-ruleForm.admin-form(:model='ruleForm' :rules='rules' ref='ruleForm')
      .el-form__flex
        el-form-item(label='Title it' prop='title_it')
          el-input(v-model='ruleForm.title_it' @change="createSlug(ruleForm.title_it, 'slug_it')")
        el-form-item(label='Title en', prop='title_en')
          el-input(v-model='ruleForm.title_en'  @change="createSlug(ruleForm.title_en, 'slug_en')")
      .el-form__flex
        el-form-item(label='Slug it' prop='slug_it')
          el-input(v-model='slug_it')
        el-form-item(label='Slug en', prop='slug_en')
          el-input(v-model='slug_en')
      .el-form__flex
        .el-form-item
          label Excerpt it
          client-only
            TuiEditor(v-model="excerpt_it" mode="markdown")
        .el-form-item
          label Excerpt en
          client-only
            TuiEditor(v-model="excerpt_en" mode="markdown")
      .tipos
        el-form-item(label='Tipo' prop='tipo')
          el-select(v-model='ruleForm.tipo', placeholder='Select')
            el-option(v-for='item in tipos', :key='item.id', :label='item["title_"+$i18n.locale]', :value='item.id') {{item['title_'+$i18n.locale]}}

      el-upload.upload-demo(drag='', action='https://jsonplaceholder.typicode.com/posts/' :on-change="handleImageChange" :auto-upload="false" ref="upload")
        i.el-icon-upload
        .el-upload__text
          | Drop file here or
          em click to upload
        .el-upload__tip(slot='tip') jpg/png files with a size less than 500kb

      el-form-item
        el-button(type='primary' :loading="loading" @click="submitForm()") Create
</template>
<script>
export default {
  layout: "admin",
  async asyncData({$axios}) {
    const {tipos} = await $axios.$get(process.env.baseUrl + '/api/tipo/fetch');
    return {tipos};
  },
  data() {
    return {
      loading: false,
      image: null,
      excerpt_it: "",
      excerpt_en: "",
      slug_it: "",
      slug_en: "",
      tipo: '',
      ruleForm: {
        title_it: "",
        title_en: ""
      },
      rules: {
        title_it: [
          {required: true, message: "Field is required", trigger: "blur"}
        ],
        title_en: [
          {required: true, message: "Field is required", trigger: "blur"}
        ]
      }
    };
  },
  methods: {
    handleImageChange(file) {
      this.image = file.raw;
    },
    createSlug(value, prop) {
      let slug = value.toLowerCase();
      slug = slug.split(" ").join("-").replace(/[^\w-]+/g, '');
      this[prop] = slug;
    },
    submitForm() {
      this.loading = true;
      this.$refs.ruleForm.validate(async valid => {
        if (valid && this.image) {
          console.log(this.image, 'this.image');
          try {
            const formData = new FormData();
            formData.append('title_it', this.ruleForm.title_it);
            formData.append('title_en', this.ruleForm.title_en);
            formData.append('slug_it', this.slug_it);
            formData.append('slug_en', this.slug_en);
            formData.append('excerpt_it', this.excerpt_it);
            formData.append('excerpt_en', this.excerpt_en);
            formData.append('tipoId', this.tipoId);
            formData.append('image', this.image);


            for (let pair of formData.entries()) {
              console.log(pair[0] + ', ' + pair[1]);
            }

            const data = {
              'title_it': this.ruleForm.title_it,
              'title_en': this.ruleForm.title_en,
              'slug_it': this.slug_it,
              'slug_en': this.slug_en,
              'excerpt_it': this.excerpt_it,
              'excerpt_en': this.excerpt_en,
              'tipoId': this.tipoId,
              'image': {image: this.image},
            }

            await this.$axios.$post(process.env.baseUrl + "/api/solution/create", formData);
            // await this.axios(process.env.baseUrl + "/api/solution/create", formData);

            this.loading = false;

            this.ruleForm.title_it = "";
            this.ruleForm.title_en = "";
            this.slug_it = "";
            this.slug_en = "";
            this.excerpt_it = "";
            this.excerpt_en = "";
            this.image = null;
            this.tipo = "";
            this.$refs.upload.clearFiles();

            // if (response.data.status === 1) {
            //   this.$message.success(response.data.message);
            //   window.location.href = process.env.baseUrl + "/admin";
            // } else {
            //   this.$message.warning(response.data.message);
            // }
          } catch (error) {
            console.log(error, "error login form");
            this.loading = false;
          }
        } else {
          this.loading = false;
          this.$message.error('Upload file!!!');
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

Если посылаю объект data, то все норм, только в поле для картинки прописывается только uid. 

Я так понял, что когда нужно посылать вложенные объекты нужно использовать formData.


В чем моя ошибка?
  • Вопрос задан
  • 12 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Solar Staff Лимассол
от 3 200 до 3 700 €
Solar Staff Лимассол
от 3 000 до 3 600 €
МТТ Москва
от 150 000 ₽
27 июл. 2021, в 22:00
25000 руб./за проект
27 июл. 2021, в 21:59
1500 руб./за проект
27 июл. 2021, в 21:54
15000 руб./за проект