使用 vuetify 2 v-file-input 和 axios 上传文件

Question

首先，我检查了file-upload-in-vuetify 和vuetify-file-uploads 的问题。但是那里的解决方案不起作用。

我正在尝试使用 vuetify 2 <v-file-input> 发送多个 PDF 文件。我创建了FormData 对象并附加了我的所有文件，但是当我尝试提交时，它没有到达我的后端。我只是得到一个空对象。这是我的代码：

模板：

<v-layout>
    <v-flex>
      <v-file-input show-size counter chips multiple label="Arquivo Geral" ref="myfile" v-model="files"></v-file-input>
    </v-flex>
    <v-flex>
      <v-btn color="primary" text @click="submitFiles">test</v-btn>
    </v-flex>
</v-layout>

脚本：

data() {
    return {
        files: null,
    }
}
methods: {
    submitFiles(){
        let formData = new FormData()

        if(this.files){

            for( let file in this.files){
                formData.append("cave", file)
            }

            console.log(formData.getAll("cave"))
            console.log(this.files)
            axios.post('https://eniwp6w65oc77.x.pipedream.net/', 
                        {
                            files: formData,
                            test: "test"
                        }, 
                        { 
                            headers: { 
                                'Content-Type': 'multipart/form-data'
                            } 
                        }).then( response => {
                            console.log('Success!')
                            console.log({response})
                        }).catch(error => {
                            console.log({error})
                        })
        }
        else {
            console.log('there are no files.')
        }
    }
}

requestbin 中的响应正文和标头：

正文：

{
    "files": {},
    "test": "test"
}

标题：

host: eniwp6w65oc77.x.pipedream.net
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,pt;q=0.8,gl;q=0.7
Cache-Control: no-cache
Content-Type: multipart/form-data
Origin: http://localhost:8000
Pragma: no-cache
Referer: http://localhost:8000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
Content-Length: 28
Connection: keep-alive

Answer 1

首先，您的代码中有两个错误：

1. 你在哪里准备 FormData 对象。您不能在这里使用for-in 循环来迭代文件数组，因为for-in 循环遍历对象的可枚举属性名称。您可以改用for-of 循环。

2. 您在括号中使用formData。您应该传递 FormData 实例，而不是 JSON。要使用FormData 发送"test" 等其他参数，请执行formData.append("test", "foo bar")

还要检查您的后端是否正确处理 multipart/form-data 数据。如果您的后端位于Node.js 和Express.js 中，那么您应该使用适当的正文解析器中间件，例如multer

这是一个工作示例：

Node.js/Express.js 后端：

const multer = require("multer"),
...    
router.post("/upload-files", multer().array("files"), function (req, res) {
    console.log("body: ", req.body);
    console.log("files:", req.files);
    return res.sendStatus(200);
});

前端：

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("/upload-files", formData)
            .then(response => {
                console.log("Success!");
                console.log({ response });
            })
            .catch(error => {
                console.log({ error });
            });
    } else {
        console.log("there are no files.");
    }
}

请注意，当您将FormData 作为POST 请求正文传递时，您不需要手动设置Content-Type 标头