Невозможно понять, как сделать запрос POST Ax ios, который содержит файл multipart / form-data в Vue. js - PullRequest
Новая
       159

Невозможно понять, как сделать запрос POST Ax ios, который содержит файл multipart / form-data в Vue. js

0 голосов
/ 07 августа 2020

Мне крайне сложно понять, как сделать POST-запрос к моему бэкэнду, когда файл задействован при использовании Vue. js для внешнего интерфейса и Ax ios для POST request.

Я хотел бы позволить пользователю выбрать изображение для сервера, который он создает, однако я наткнулся на кирпичную стену. Я добавил ввод с типом файла, и всякий раз, когда пользователь выбирает изображение, я устанавливаю свойство файла для этого изображения. Проблема в том, что я не знаю, что делать дальше. Как мне заставить Ax ios отправлять запрос POST как enctype= multipart/form-data и как мне применить файл к полезной нагрузке, которую я отправляю с запросом POST? 

<form @submit='createServer($event)'>
    <input v-model="addServerInput.name" placeholder="Enter a server name">
    <input type="file" name="image" @change="handleFileUpload($event)">
    <button type="submit" name="button">Create</button>
</form>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            addServerInput: {
                name: '',
                file: ''
            }
        }
    },
    methods: {
        handleFileUpload(event){
            this.addServerInput.file = event.target.files[0]
        },
        createServer(event){
            event.preventDefault()

            let server = {
                name: this.addServerInput.name,
                userId: localStorage.userId
            }

            axios.post('/createServer', server)
            .then((response) => {
                this.addServerWindow = false;
                this.$store.commit('addServer', response.data)
            })
            .catch((error) => {
                console.log(error);
            });
        }
    }
}
</script>

1 Ответ

2 голосов
/ 07 августа 2020

Если вы передадите простой объект в качестве второго аргумента для post, тогда Ax ios закодирует его как JSON.

Чтобы данные были закодированы как multipart , вместо этого передайте FormData объект . 

let server = new FormData();
server.append("file", this.addServerInput.file, this.addServerInput.name);
server.append("userId", localStorage.userId);
...