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

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

您正在准备FormData对象的位置。您不能在此处使用for-in循环来迭代文件数组，因为for-in循环了对象的可枚举属性名称。您可以改用for-of循环。
您在方括号中使用formData。您应该传递FormData实例，而不是JSON。要使用"test"发送FormData之类的附加参数，请执行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.");
    }
}

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

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

1 个答案: