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

Posted 2023-02-23

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

【英文标题】：Uncaught typeerror Illegal Invocation when trying to upload image in vue js?

【发布时间】：2018-06-04 19:41:07

【问题描述】：

我的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)

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

【参考方案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>

【讨论】：

Uncaught TypeError: Cannot read property 'files' of null at Vue$3.imgSubmit (submit:880) at Proxy.boundFn (vue.js:167) at submit (eval at makeFunction (vue.js) :9252), :2:4120) 在 HTMLFormElement.invoker (vue.js:1732)

你在console.log(imagefile)得到了什么？

null 即将到来

我不应该像你说的那样null，@coder：选择和图像你会得到图像细节，我认为它在我的 sn-p 中工作

还在 ajax 中添加 processData: false, contentType: false, 以发布文件