Question

我在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);
            }

我已经尝试了在互联网上找到的脚本，但是该脚本无法正常工作；脚本也只用于文件。

Answer 1

我知道这太旧了，但对于下一个到达此答案的人，让我们看看 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 并向 { {1}} 在您为页面提供服务的域中，将表单数据对象作为正文发送。如果您收到 404，则表示 /about 不存在。

Vuetify使用Axios从表单发送数据

1 个答案: