Question

大家好，我都想用ajax上传文件。我还传递了一个用户名，以将其插入数据库。在以前的表单中，我一直在使用vuejs在提交上运行小说，而不是实际使用php提交表单。当我对所有内容进行json编码时，不需要刷新。这是我的形式，问题是我无法使文件上传正常工作。

    <div id="app">
    <form role="form" onsubmit="return false">
    <div class="form-group">
    <label>Username</label>
    <input type="text" placeholder="Username" v-model="userName" name="userName" class="form-control>
    </div>
    <div class="form-group">
    <label>File</label>
    <input type="file" @change="processVideoFile($event)" id="uploadVideoFile">
    </div>
    </div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
    userName: '',
    uploadVideoFile:''
    methods: {
            processVideoFile: function() {
            this.uploadVideoFile=$('#uploadVideoFile').val();
      },
       addTemplate: function(){
              this.sub=true;
              var jsonString = JSON.stringify({
              uploadVideoFile: this.uploadVideoFile,
              userName: this.userName
            });
           if(this.userName!=''){
                $.ajax({
              url: 'addTemplateBackend.php',
              dataType: 'json',
              type: 'post',
              contentType: 'application/json',
              dataType: 'json',
              data: jsonString,
                error: function(data){
                  alert('error');
                },
              success: function(data){
                console.log(data);
                  alert('success');
              }.bind(this)
            });
          }
          },
        }
      });

</script>

添加模板后端

<?php session_start(); ob_start();
require_once('database.php');
  $requestBody = file_get_contents('php://input');
  $requestJSON = json_decode($requestBody);
  $data=json_encode($requestJSON);
  echo $data;
move_uploaded_file($requestJSON->uploadVideoFile, 'www.somesite.com/braiden/braintree/');
?>

使用ajax PHP Vuejs上传文件

0 个答案: