使用Vue.js HTML添加多张图片时出现illegal invocation错误求助

我之前踩过这个坑！你遇到的illegal invocation错误，大概率是在处理多图上传时，FormData的使用方式不对，或是文件处理的逻辑出了问题。结合你给出的代码片段，我帮你梳理下问题和解决方案：

先分析错误原因 #

这个错误通常发生在以下场景：

• 尝试用v-model直接绑定文件输入框（file input），但file input是只读的，Vue的响应式系统无法正确处理
• 调用FormData的方法时丢失了上下文（比如把append方法抽出来单独调用，或者用箭头函数导致this指向错误）
• 传递给FormData的不是合法的File对象

修正后的完整代码 #

HTML部分 #

<div id="app">
  <form method="POST" @submit.prevent="handleSubmit">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group label-floating">
          <label class="control-label">Name</label>
          <input type="text" class="form-control" v-model="name">
        </div>
      </div>
    </div>

    <!-- 动态生成的图片上传行 -->
    <div class="row" v-for="(_, index) in phone" :key="index">
      <div class="col-md-4">
        <div class="form-group label-floating">
          <label class="control-label">Image {{ index + 1 }}</label>
          <!-- 不能用v-model，手动监听change事件获取文件 -->
          <input type="file" class="form-control" @change="handleFileChange($event, index)">
        </div>
      </div>
      <div class="col-md-2">
        <button type="button" class="btn btn-danger" @click="removeImage(index)">Remove</button>
      </div>
    </div>

    <button type="button" class="btn btn-primary" @click="addImage">Add New Image</button>
    <button type="submit" class="btn btn-success mt-3">Submit</button>
  </form>
</div>

Vue脚本部分 #

new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      phone: [], // 仅用来控制v-for的渲染数量，占位用
      files: [] // 专门存储选中的File对象，避免和响应式对象冲突
    }
  },
  mounted() {
    // 初始化一个图片上传框
    this.addImage();
  },
  methods: {
    addImage() {
      this.phone.push({});
      this.files.push(null); // 对应位置初始化空值
    },
    removeImage(index) {
      this.phone.splice(index, 1);
      this.files.splice(index, 1);
    },
    handleFileChange(event, index) {
      // 获取选中的文件
      const selectedFile = event.target.files[0];
      if (selectedFile) {
        this.files[index] = selectedFile;
      }
    },
    handleSubmit() {
      try {
        const formData = new FormData();
        // 添加文本字段
        formData.append('name', this.name);
        // 遍历文件数组，添加到FormData
        this.files.forEach((file, idx) => {
          if (file) {
            formData.append(`images[${idx}]`, file);
            // 后端如果用数组接收，也可以写成formData.append('images[]', file);
          }
        });

        // 发送上传请求（这里用axios举例）
        axios.post('/your-upload-endpoint', formData, {
          headers: {
            // 这里可以不用手动设置，axios会自动识别FormData并添加正确的Content-Type
            // 'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          console.log('上传成功！', res);
          // 重置表单
          this.name = '';
          this.phone = [];
          this.files = [];
          this.addImage();
        }).catch(err => {
          console.error('上传失败', err);
        });
      } catch (err) {
        console.error('处理表单时出错', err);
      }
    }
  }
});

关键注意事项 #

1. 不要用v-model绑定file input：file input的值是只读的，必须通过change事件手动获取File对象，这是避免错误的核心
2. 单独存储File对象：不要把File对象直接放在phone这种响应式数组里，单独用files数组存储，避免Vue的响应式劫持干扰FormData的处理
3. FormData的正确使用：创建FormData后，直接用append方法添加字段和文件，不要尝试修改FormData的原型或抽离方法调用，否则会丢失上下文导致illegal invocation
4. 请求头设置：用axios或fetch发送请求时，不要手动设置Content-Type: multipart/form-data，浏览器会自动生成包含边界符的正确头信息，手动设置反而可能出错

内容的提问来源于stack exchange，提问作者Wanderer