时间戳

首页 > 解决方案 > Vuetify 使用 Axios 从表单发送数据

forms - Vuetify 使用 Axios 从表单发送数据

问题描述

我在我的 VueJs 项目中使用 Vuetify，我需要从我正在上传文件 (CSV) 并获得一些数字输入的表单中发送数据。我需要用 Axios 做到这一点。

我试图做某事，但总是得到 404。

这是我的 Vuetify 代码：

<v-form>
    <v-container>
        <v-row>
            <v-file-input
                show-size
                counter
                multiple
                label="Nacitaj CSV"
                ref="myfile"
                v-model="files"
            ></v-file-input>
        </v-row>

            <v-row>
                <v-col>
                    <v-text-field
                        type="number"
                        label="zadaj cislo"
                    />
                </v-col>
                <v-col>
                    <v-text-field
                        type="number"
                        label="zadaj cislo"
                    />
                </v-col>
            </v-row>

            <v-row>
                <v-col :cols="2">
                    <v-btn
                        block
                        color="primary"
                        @submit="submitFiles"
                    >
                        Submit
                    </v-btn>
                </v-col>
            </v-row>
    </v-container>
</v-form>

methods: {
        submitFiles() {
            if (this.files) {
                 let formData = new FormData();
                 // files
                 for (let file of this.files) {
                    formData.append("files", file, file.name);
                 }
                 // additional data
                 formData.append("test", "foo bar");
                 axios.post("/about", formData);
            }

我已经尝试过在互联网上找到的脚本，但它不起作用；该脚本也仅适用于该文件。

标签： formsvue.jsaxiosvuetify.js

解决方案

我知道这已经很老了，但是对于下一个得到这个答案的人，让我们看一下 submitFiles 函数：

submitFiles() {
            if (this.files) {
                 let formData = new FormData();
                 // files
                 for (let file of this.files) {
                    formData.append("files", file, file.name);
                 }
                 // additional data
                 formData.append("test", "foo bar");
                 axios.post("/about", formData);
            }

首先if是检查是否files不为空。files是模型的一部分。如果有文件，它会创建一个新对象来保存表单数据 ( formData)。

然后它将循环文件对象并将文件附加到保存表单数据的对象，然后它将附加一个test用该值调用的字段并向您正在为您的页面提供服务的域foo bar发出一个发布请求，发送表单数据对象/about作为身体。如果你得到一个 404 这应该意味着它about不存在。

推荐阅读