[英]File Upload using vuetify 2 v-file-input and axios
First of all, i've checked questions file-upload-in-vuetify and vuetify-file-uploads .首先,我检查了问题file-upload-in-vuetify和vuetify-file-uploads 。 But the solutions there didn't work.
但是那里的解决方案不起作用。
I'm trying to use vuetify 2 <v-file-input>
to send multiple PDF files.我正在尝试使用 vuetify 2
<v-file-input>
发送多个 PDF 文件。 I created the FormData
object and appended all my files but when i attempt to submit it doesn't reach my backend.我创建了
FormData
对象并附加了我的所有文件,但是当我尝试提交时,它没有到达我的后端。 I just get an empty object.我只是得到一个空对象。 this is my code:
这是我的代码:
Template:模板:
<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>
script:脚本:
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.')
}
}
}
my response body and header in requestbin:我在 requestbin 中的响应正文和标头:
body:身体:
{
"files": {},
"test": "test"
}
header:标题:
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
First of all, you have two bugs in code:首先,您在代码中有两个错误:
Where you're preparing FormData
object.您在何处准备
FormData
对象。 You can't use for-in
loop for iterating an array of files here since for-in
loops over enumerable property names of an object.您不能
for-in
这里使用for-in
循环来迭代文件数组,因为for-in
循环遍历对象的可枚举属性名称。 You can use for-of
loop instead.您可以改用
for-of
循环。
You're using formData
in brackets.您在括号中使用
formData
。 You should pass FormData
instance, not JSON.您应该传递
FormData
实例,而不是 JSON。 To send aditional paramaters like "test"
using FormData
do formData.append("test", "foo bar")
要使用
FormData
发送诸如"test"
formData.append("test", "foo bar")
参数,请执行formData.append("test", "foo bar")
Also check that your backend properly handles multipart/form-data
data.还要检查您的后端是否正确处理了
multipart/form-data
数据。 If your backend is in Node.js
and Express.js
then you should use proper body parser middleware, for example multer如果您的后端在
Node.js
和Express.js
那么您应该使用适当的正文解析器中间件,例如multer
Here is a working example:这是一个工作示例:
Node.js/Express.js backend: 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);
});
frontend:前端:
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.");
}
}
Note that you don't need to set Content-Type
header manually when you pass FormData
as a POST
request body请注意,当您将
FormData
作为POST
请求正文传递时,您不需要手动设置Content-Type
标头
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.