使用vuejs和jquery ajax函数上传文件

Question

请其中一位编码大师请告诉我如何使用vuejs和jquery ajax函数上传文件。我已经见过很多关于axios，firebase和其他东西的东西，但是我只想使用jquery ajax函数是可能的。

我有以下代码可以在vue应用程序的外部正常运行，但是当我将其粘贴到某个方法中时，突然之间所有地狱刹车松开，并且不再起作用。我的老板希望Vueapp中包含所有内容。任何帮助，将不胜感激。

<script>
$(document).ready(function(){
   $('#addTemplateForm').on('submit', function(e){
       e.preventDefault();
       app.sub=true;
       if(app.name!='' && app.thumbnailName!='' && app.renderTime!=''
&& app.textFieldCount!='' && app.selectedCategories.length!=0 && app.selectedKeywords.length!=0)
       $.ajax({
           url:'addTemplateBackend.php',
           type:'POST',
           dataType: 'json',
           data: new FormData(this),
           contentType: false,
           processData: false,
            error: function(data){
              alert('error');
            },
           success: function(data){
               alert('success');
               console.log(data);
           }
       })
   });
});
</script>

执行此操作时

set isset和FILES，但是如果我将其放置在这样的方法中：

addTemplate(){
      var myData=new FormData(this);
   if(this.name!='' && this.thumbnailName!='' && this.renderTime!='' && this.textFieldCount!='' && this.selectedCategories.length!=0 && this.selectedKeywords.length!=0){
       $.ajax({
           url:'addTemplateBackend.php',
           type:'POST',
           dataType:'json',
           data: myData,
           error: function(data){
               alert('error');
           },
           success: function(data){
               alert('success');
           }
       });
   }   
  }

突然未设置$ _POST和$ _Files！为什么会这样？ 这是下面的表格。再次感谢您的帮助

<div id="addTemplateApp">
<form role="form" enctype="multipart/form-data" method="post" id="addTemplateForm">
        <div class="form-group">
            <label>Upload Thumbnail Video</label>
            <input type="file" name="uploadThumbnailVideo" id="uploadThumbnailVideo" v-on:change="processVideoFile();">
        </div>
        <!--end UploadThumbnailVideo-->
          <input @click.prevent="addTemplate()" type="submit" class="btn btn-primary btn-block btn-circle" value="Add Template">
    </form><!--end .form-->
    </div><!--end .col-md-6 col-md-offset-3-->
    </div><!--end .row-->

</div><!--end .content container-->
</div><!--end #addTemplateApp-->
<script>
var app = new Vue({
  el: '#addTemplateApp',
  data: {
      name:'',
      thumbnailName:'',
      renderTime:'',
      categories: [],
      keywords: [],
      selectedKeywords: [],
      selectedCategories: [],
      categoryName:'',
      keywordName:'',
      categoryNameToEdit:'',
      categoryIdToEdit:'',
      categoryIdExists:true,
      categoryIdExists:true,
      keywordIdExists:true,
      deleteConstraint: false,
      keywordIdToEdit:'',
      keywordNameToEdit:'',
      error: false,
      nameExists: false,
      sub: false,
      textInstructions1:'',
      textInstructions2:'',
      textInstructions3:'',
      textInstructions4:'',
      textInstructions5:'',
      textInstructions6:'',
      textInstructions7:'',
      textInstructions8:'',
      textInstructions9:'',
      textInstructions10:'',
      textInstructions11:'',
      textInstructions12:'',
      textInstructionsCount:'',
      textFieldCount:'',
      colorFieldCount:'',
      colorInstructions1:'',
      colorInstructions2:'',
      colorInstructions3:'',
      colorInstructions4:'',
      layerFieldCount:'',
      layerInstructionsCount:'',
      layerInstructions1:'',
      layerInstructions2:'',
      layerInstructions3:'',
      uploadInstructionsCount:'',
      uploadFieldCount:'',
      uploadInstructions1:'',
      uploadInstructions2:'',
      uploadInstructions3:'',
      uploadThumbnailVideo:'',
      uploadColorThumb1:'',
      uploadColorThumb2:'',
      uploadColorThumb3:'',
      uploadColorThumb4:'',
      stillImageLocation:'',
      colorInstructionsCount:'',
      color1Preset:'',
      color2Preset:'',
      color3Preset:'',
      color4Preset:'',
      tested:''
  },
  computed: {
  },
  watch: {
  },
  created: function(){
    this.categories=<?php echo json_encode($categoryArray); ?>;
    this.keywords=<?php echo json_encode($keywordArray); ?>;
  },
  methods: {
        processVideoFile: function() {
        this.uploadThumbnailVideo=$('#uploadThumbnailVideo').val();
  },
      addTemplate(){
          var myData=new FormData(this);
       if(this.name!='' && this.thumbnailName!='' && this.renderTime!='' && this.textFieldCount!='' && this.selectedCategories.length!=0 && this.selectedKeywords.length!=0){
           $.ajax({
               url:'addTemplateBackend.php',
               type:'POST',
               contentType:'application/x-www-form-urlencoded',
               dataType:'json',
               data: myData,
               error: function(data){
                   alert('error');
               },
               success: function(data){
                   alert('success');
               }
           });
       }   
      }
  }
  });
</script>