Как правильно отравить form-data на сервер?

Question

[this__all]

Подскажите как правильно отправить form-data с помощью axios во Vue

Мой код

<script>
import axios from "axios";

export default {
  metaInfo: {
    title: "Добавить сотрудника"
  },
  data: () => ({
    post: null,
    first_name: "",
    second_name: "",
    surname: "",
    file: "",
    mac: "",
    options: null,
    textModal: "",
    openModal: false
  }),
  created() {
    axios
      .get("http://localhost:8888/public/api/posts", {
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + this.$store.getters.getToken
        }
      })
      .then(response => {
        if (response.status == 200) {
          this.options = response.data.posts;
        }
      });
  },
  methods: {
    newEmployee() {
      const formData = new formData();
      formData.append("photo", this.file);
      if (
        this.post != null ||
        this.first_name != "" ||
        this.second_name != "" ||
        this.surname != "" ||
        this.file != "" ||
        this.mac != ""
      ) {
        axios
          .post(
            "http://localhost:8888/public/api/add-employee",
            {
              post: this.post,
              first_name: this.first_name,
              second_name: this.second_name,
              surname: this.surname,
              file: this.file,
              mac: this.mac,
              formData
            },
            {
              headers: {
                "Content-Type": "application/json",
                Authorization: "Bearer " + this.$store.getters.getToken
              }
            }
          )
          .then(response => {
            if (response.status == 201) {
              this.$store.commit("logout");
              this.$router.push("/");
            }
          })
          .catch(error => {
            if (error.response.status == 422) {
              this.textModal = "";
              this.openModal = true;
              setTimeout(() => (this.openModal = false), 2000);
            }
          });
      } else {
        this.textModal = "Введите все данные!";
        this.openModal = true;
        setTimeout(() => (this.openModal = false), 2000);
      }
    },
    selectPhoto() {
      this.file = this.$refs.file.files[0];
    }
  }
};
</script>

Comments

[Михаил]

formdata это формат, так что, либо json либо formdata

[this__all]

Михаил, наверное не корректно вопрос задал. Можете подсказать, что нужно сделать чтобы отправить изображение на сервер, которое хранится в formData

[Михаил]

this__all, отправить formdata а не json

[this__all]

Михаил, я изменил на form-data,но всё равно ошибка formData is not a constructor

[this__all]

Михаил, вот изменил

headers: {
                "Content-Type": "multipart/form-data",
                Authorization: "Bearer " + this.$store.getters.getToken
              }

[Михаил]

this__all, FormData

[Михаил]

this__all, еще раз
json это формат данных, грубо говоря js объект
И formdata это формат данных
Либо одно либо другое

[this__all]

Михаил, то есть я не смогу отправить данные и изображение вместе ?

[Михаил]

this__all, через .append

[this__all]

Михаил, да я уже нашёл спасибо)

Answer 1

[bubaley]

Поменяйте Content-Type: multipart/form-data
Если есть возможность, то лучше использовать json. Перед отправкой из картинки делать base64 и на беке приводить обратно к файлу.

Answer 2

[mcavalon]

let form_data = new FormData();
form_data.append( 'title', app.title );
form_data.append( 'type', app.activeTab ? 'url' : 'file' );

this.axios.post('/url', form_data)....