尝试在vue js中上传图像时未捕获类型错误非法调用？

Question

我的html表单是

<form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="imgSubmit($event);">                                
        <h4 class="info-text">Give us somme images and videos ? </h4>
        <div class="row">  
             <div class="col-sm-6">
                <div class="form-group">
                    <label for="property-images">Chose Images :</label>
                   <input type="file" id="wizard-picture"  @change="imgSubmit($event)" multiple>
                    <p class="help-block">Select multipel images for your property .</p>
                </div>
            </div>
            <div class="col-sm-6"> 

            </div>
            <div class="wizard-footer">
             <div class="pull-right">
         <button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
     </div>


</div>
</div></form> 

我的vue js代码是

submitBox = new Vue({
el: "#submitBox",
  data: {
pid: '',
image: '',
},
 methods: {
     imgSubmit: function(e) {
           var vm = this;
           let data = new FormData()
            data.append('name', 'image')
            data.append('file', e.target.files[0])
            $.ajax({
              url: "add/post/image/",
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status)
              {

               alert("Registration Success")

            }
              else {
                vm.response = e;

               alert("Registration Failed") 
              }
          }
            }); 

当我使用此代码时，我会遇到错误

jquery-1.10.2.min.js:6 Uncaught TypeError: Illegal invocation
    at o (jquery-1.10.2.min.js:6)
    at gn (jquery-1.10.2.min.js:6)
    at Function.x.param (jquery-1.10.2.min.js:6)
    at Function.ajax (jquery-1.10.2.min.js:6)
    at Vue$3.imgSubmit (submit:883)
    at Proxy.boundFn (vue.js:167)
    at change (eval at makeFunction (vue.js:9252), <anonymous>:2:4508)
    at HTMLInputElement.invoker (vue.js:1732)

我需要上传多张图片。我怎样才能达到同样的效果？上传图片时出现上述错误，点击提交时出现以下错误

submit:882 Uncaught TypeError: Cannot read property '0' of undefined
    at Vue$3.imgSubmit (submit:882)
    at Proxy.boundFn (vue.js:167)
    at submit (eval at makeFunction (vue.js:9252), <anonymous>:2:4120)
    at HTMLFormElement.invoker (vue.js:1732)

可以请任何人帮助我实现同样的目标吗？

Answer 1

我没有尝试使用event，但您可以使用正常功能实现，无事件调用v-on:submit="imgSubmit"，imgSubmit: function() {

并通过id获取文件，同样在ajax中更改

var imagefile = document.querySelector('#wizard-picture');
if (imagefile.files && imagefile.files[0]) {
    data.append("file", imagefile.files[0]);
}
$.ajax({
processData: false,  // tell jQuery not to process the data
contentType: false,  // tell jQuery not to set contentType
........
........

虽然你有变量（对于e）函数imgSubmit和ajax发生冲突

添加你的代码 sn -p

var app = new Vue({
el: "#submitBox",
  data: {
  pid: '',
  image: '',
  },
  methods: {
    imgSubmit: function(e) {
      var vm = this;
      let data = new FormData();
      data.append('name', 'image');
      data.append('file', e.target.files[0]);
      console.log(data.get('file'));
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="submitBox">
<form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="imgSubmit($event);">                                
        <h4 class="info-text">Give us somme images and videos ? </h4>
        <div class="row">  
             <div class="col-sm-6">
                <div class="form-group">
                    <label for="property-images">Chose Images :</label>
                   <input type="file" id="wizard-picture"  @change="imgSubmit($event)" multiple>
                    <p class="help-block">Select multipel images for your property .</p>
                </div>
            </div>
            <div class="col-sm-6"> 

            </div>
            <div class="wizard-footer">
             <div class="pull-right">
         <button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
     </div>


</div>
</div></form> 
</div>