formdata.append 使用 vuejs 和 vuex 提交表单时不工作

Question

我有这个表单，我还有另一个使用 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)
      })

    },

  },

Answer 1

如果你想在一个数组中放置多个文件，你必须每次都附加准确的字段名称。不要添加索引，也不需要括号：

formData.append('files[' + i + ']', file); // ❌ Wrong

formData.append('files', file); // ✅ Correct, use the same name each time

当你 axios.post 时，formData 应该是第二个参数：

const url = 'http://test.local/wp-json/mytestapi/submitTodo';
axios.post(url, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

formdata.append 使用 vuejs 和 vuex 提交表单时不工作

formdata.append not working when submiting a form using vuejs or vuex

javascript

vue.js

vuex

form-data

vuex-modules