无法弄清楚如何在 Vue.js 中发出包含“multipart/form-data”文件的 Axios POST 请求

Question

当前端使用 Vue.js 和使用 Axios 进行 POST 请求时涉及文件时，我很难弄清楚如何向后端发出 POST 请求。

我想让用户为他正在创建的服务器选择一个图像，但是，我遇到了难题。我添加了一个文件类型的输入，每当用户选择图像时，我都会将我的文件属性设置为该图像。问题是我不知道下一步该做什么。我应该如何让 Axios 将 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>

Answer 1

如果您将 普通对象 作为第二个参数传递给 post，那么 Axios 会将其编码为 JSON。

要将数据编码为多部分，请改为传递FormData object。

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