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

Posted 2023-02-22

【中文标题】使用 vuetify 2 v-file-input 和 axios 上传文件

【英文标题】：File Upload using vuetify 2 v-file-input and axios

【发布时间】：2020-01-06 11:19:03

【问题描述】：

首先，我检查了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

【问题讨论】：

你能展示你的后端吗

嗨@MarcelusTrojahn，主要问题是我的formData对象，在“文件”键中，在我的requestbin链接中为空。我不知道是什么原因造成的。我怀疑问题可能出在请求中或我如何制作我的 formData 对象。客户端的请求是我在“脚本”代码中的 axios 发布请求。我在服务器端添加了缺少的请求标头。

@ßiansorÅ.Ålmerol 我一直在使用 requestbin 来测试我的回复。我现在更新了标题和正文

【参考方案1】：

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

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

您在括号中使用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 标头

【讨论】：

谢谢！我将 fo...in 更改为 for...of。但它仍然没有:(我一定是错过了什么

@MarcelusTrojahn, axios.post(url, formData) 工作正常。 formData 应该是 FormData 的实例，而不是普通的 JSON。我认为问题出在您的后端。你能提供你的后端代码吗？

想通了。我在正文请求中的括号之间使用了 formData。最后我的代码有2个错误。括号之间的 For..in 和 formData。你的例子工作正常。谢谢尤里

formData javascript 对象是使其工作的关键，非常感谢！