javascript - 使用 vuejs 或 vuex 提交表单时,formdata.append 不起作用
问题描述
我确实有这个表单,并且我有另一个使用 vue2-dropzone 上传文件的组件。选择文件时,$store 状态上传将被更新。我的问题是当我提交表单时 FormData 不发送文件。formdata.append 不工作。我确实在网络下检查,我可以看到 formdata 等于 {}。请问我做错了什么。
<form class="outer-repeater" @submit.prevent="submitTask">
<div data-repeater-list="outer-group" class="outer">
<div data-repeater-item class="outer">
<div class="form-group row mb-4">
<label for="taskname" class="col-form-label col-lg-2">Task Name</label>
<div class="col-lg-10">
<input
id="taskname"
name="taskname"
type="text"
class="form-control"
placeholder="Enter Task Name..."
v-model="task.title"
/>
</div>
</div>
<div class="form-group row mb-4">
<label class="col-form-label col-lg-2">Task Description</label>
<div class="col-lg-10">
<ckeditor :editor="editor" v-model="task.description"></ckeditor>
</div>
</div>
<div class="form-group row mb-4">
<label class="col-form-label col-lg-2">Task Date</label>
<div class="col-lg-10">
<date-picker v-model="task.daterange" range append-to-body lang="en" confirm></date-picker>
</div>
</div>
<div class="inner-repeater mb-4">
<div class="inner form-group mb-0 row">
<label class="col-form-label col-lg-2">Add Team Member</label>
<div
class="inner col-lg-10 ml-md-auto"
>
<div class="mb-3 row align-items-center">
<div class="col-md-12">
<multiselect v-model="task.teamMember" label="name" :options="options" :multiple="true"
:taggable="true"></multiselect>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row mb-4">
<label for="taskbudget" class="col-form-label col-lg-2">Budget</label>
<div class="col-lg-10">
<input
id="taskbudget"
name="taskbudget"
type="text"
placeholder="Enter Task Budget..."
class="form-control"
v-model="task.budget"
/>
</div>
</div>
<div class="form-group row mb-4">
<label for="taskbudget" class="col-form-label col-lg-2">Ladda up</label>
<div class="col-lg-10">
<uploads/>
</div>
</div>
</div>
</div>
<div class="row justify-content-end">
<div class="col-lg-10">
<button type="submit" class="btn btn-primary" >Create Task</button>
</div>
</div>
</form>
methods: {
files(){
return this.$store.state.uploads.uploads
},
submitTask() {
let formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append('files[' + i + ']', file);
console.log(file)
}
formData.append('task',this.task)
axios.post('http://test.local/wp-json/mytestapi/submitTodo',
{
formData,
headers: {
'Content-Type': 'multipart/form-data;boundary=' + Math.random().toString().substr(2),
}
}).then(res => {
console.log(res.data)
}).catch(res => {
console.log(res)
})
},
},
解决方案
如果您想要这样的数组中的多个文件,则每次都必须附加确切的字段名称。不要添加索引,也不需要括号:
formData.append('files[' + i + ']', file); // ❌ Wrong
formData.append('files', file); // ✅ Correct, use the same name each time
当 youaxios.post
时,formData
应该是第二个参数:
const url = 'http://test.local/wp-json/mytestapi/submitTodo';
axios.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
推荐阅读
- python - Pandas 'concat/upsert' 数据帧
- sas - SAS:在 FIFO 基础上减去两个数字的逻辑
- php - 删除 Magento2 上某些类别中的“添加到购物车”按钮
- android - 如何在应用程序强制关闭android上添加代码
- python - 使用 Python 从进程的内存中读取数据
- angular - 如何将数据 + 多个文件从 Angular 上传到 .net core Web Api
- css - 关键帧的混合
- ruby - Ruby On Rails - 新的迁移和模型更改导致迁移失败
- javascript - 等待由不同组件触发的 2 个 API 完成,然后再触发另一个 API
- r - 列在 num 时错误地标记为 int