Laravel\Vue - ajax 文件上传在生产服务器上不起作用

Question

我有一个要上传视频文件的组件，在我的本地机器上一切正常，它曾经在生产服务器上正常工作，Namechap 是我托管项目的地方，直到直到最近我才做了一些工作并进行了更改，我发现它不再在生产服务器上工作了。

我正在使用 Vue v. 1.0.28，这是上传组件，在 fileInputChange() 方法中我将表单数据发布到 /upload 端点，该端点位于生产服务器由于某种原因我无法在后端读取：

<template>
  <div class="card-content col-md-10 col-md-offset-1">

      <div v-if="!uploading">
          <div class="col-md-12 Image-input__input-wrapper">
              Upload video
              <input type="file" name="video" id="video" @change="fileInputChange" class="Image-input__input" accept="video/*">
          </div>
      </div>

      <div class="alert alert-danger video-upload-alert" v-if="failed">Something went wrong. Please check the video format and try again. If you need any help please contact our <a>support service.</a></div>

      <div id="video-form">
          <div class="alert alert-info" v-if="uploading && !failed && !uploadingComplete">
              Please do not navigate away from this page, until the video has finished uploading. Your video will be available at <a href="{{ $root.url }}/videos/{{ uid }}" target="_blank">{{ $root.url }}/videos/{{ uid }}</a>, once uploaded.
          </div>

          <div class="alert alert-success" v-if="uploading && !failed && uploadingComplete">
              Upload complete. Video is now processing. <a href="/videos">Go to your videos</a>.
          </div>

          <div class="progress" v-if="uploading && !failed && !uploadingComplete">
              <div class="progress-bar" v-bind:style="{ width: fileProgress + '%' }"></div>
          </div>

          <div class="row">
              <div class="col-md-12 form-group">
                  <label for="title" class="control-label">Title</label>
                  <input type="text" class="form-control" v-model="title">
              </div>
              <!--
              <div class="col-md-12 form-group">
                  <label for="visibility" class="control-label">Visibility</label>
                  <select class="form-control" v-model="visibility">
                      <option value="private">Private</option>
                      <option value="unlisted">Unlisted</option>
                      <option value="public">Public</option>
                  </select>
              </div>
              -->
          </div>

          <div class="row">
              <div class="col-md-12 form-group">
                  <label for="description" class="control-label">Description</label>
                  <textarea class="form-control" v-model="description"></textarea>
              </div>
          </div>

          <div class="row">
              <div class="col-md-12 form-group">
                  <button type="submit" class="btn btn-submit" @click.prevent="update">Save</button>
              </div>
          </div>
          <div class="row">
              <div class="col-md-12 form-group">
                  <span class="help-block pull-right">{{ saveStatus }}</span>
              </div>
          </div>
  </div>
</template>

<script>
    function initialState (){
        return {
            uid: null,
            uploading: false,
            uploadingComplete: false,
            failed: false,
            title: null,
            link: null,
            description: null,
            visibility: 'private',
            saveStatus: null,
            fileProgress: 0
        }
    }
    export default {
        data: function (){
            return initialState();
        },
        methods: {
            fileInputChange() {
                this.uploading = true;
                this.failed = false;

                this.file = document.getElementById('video').files[0];

                var isVideo = this.isVideo(this.file.name.split('.').pop());

                if (isVideo) {
                  this.store().then(() => {
                      var form = new FormData();

                      form.append('video', this.file);
                      form.append('uid', this.uid);

                      this.$http.post('/upload', form, {
                          progress: (e) => {
                              if (e.lengthComputable) {
                                  this.updateProgress(e)
                              }
                          }
                      }).then(() => {
                          this.uploadingComplete = true
                          this.uploading = false
                      }, () => {
                          this.failed = true
                          this.uploading = false
                      });
                  }, () => {
                      this.failed = true
                      this.uploading = false
                  })
                }
                else {
                  this.failed = true
                  this.uploading = false
                }
            },
            isVideo(extension) {
                switch (extension.toLowerCase()) {
                case 'm4v':
                case 'avi':
                case 'mpg':
                case 'mp4':
                case 'mp3':
                case 'mov':
                case 'wmv':
                case 'flv':
                    return true;
                }
                return false;
            },
            store() {
                return this.$http.post('/videos', {
                    title: this.title,
                    description: this.description,
                    visibility: this.visibility,
                    extension: this.file.name.split('.').pop()
                }).then((response) => {
                    this.uid = response.json().data.uid;
                });
            },
            update() {
                this.saveStatus = 'Saving changes.';

                return this.$http.put('/videos/' + this.uid, {
                    link: this.link,
                    title: this.title,
                    description: this.description,
                    visibility: this.visibility
                }).then((response) => {
                    this.saveStatus = 'Changes saved.';

                    setTimeout(() => {
                        this.saveStatus = null
                    }, 3000)
                }, () => {
                    this.saveStatus = 'Failed to save changes.';
                });
            },
            updateProgress(e) {
                e.percent = (e.loaded / e.total) * 100;
                this.fileProgress = e.percent;
            },
        }
    }
</script>

问题在于，在我的控制器中的 store 函数中上传时，生产服务器上的请求对象为空，这是我在执行 dd($request->all()) 时得到的。然后它找不到视频，在网络检查器中我得到一个404 错误，这是由firstOrFail() 方法返回的，因为它找不到Video model，因为它缺少$request->uid。

模型 [App\Video] 没有查询结果。

这是控制器：

class VideoUploadController extends Controller
{
    public function index()
    {
      return view('video.upload');
    }

    public function store(Request $request)
    {
      $player = $request->user()->player()->first();

      $video = $player->videos()->where('uid', $request->uid)->firstOrFail();

      $request->file('video')->move(storage_path() . '/uploads', $video->video_filename);

      $this->dispatch(new UploadVideo(
          $video->video_filename
      ));

      return response()->json(null, 200);
    }
}

我不确定发生了什么，因为在控制台中检查网络选项卡时，我正在发送如下所示的请求负载：

------WebKitFormBoundarywNIkEqplUzfumo0A Content-Disposition: form-data;名称="视频"; filename="Football Match Play.mp4" Content-Type: video/mp4

------WebKitFormBoundarywNIkEqplUzfumo0A Content-Disposition: form-data;名称="uid"

159920a7878cb2 ------WebKitFormBoundarywNIkEqplUzfumo0A--

这真的很令人沮丧，因为我不知道如何解决这个问题，当我的本地机器上一切正常时，不知道生产服务器上出了什么问题以及如何解决它？

更新

它自己又开始工作了，因为我在 Namecheap 支持服务中创建了一张票，一天后突然又开始工作了，我没有做任何更改，并且在询问 Namecheap 支持时我得到了他们的答复，他们也没有做任何更改，所以我不知道出了什么问题，这仍然有点令人沮丧，因为我想在将来避免这种情况，但至少现在一切都恢复正常了应该的。

Answer 1

Laravel 的$request->all() 方法只从输入中拉取，因此在VideoUploadController 的store() 方法中$request->all() 返回空对象。

在您的脚本中，它会在文件更改时检查isVideo 是否为真后调用this.store()。结果，没有uid 参数或video 参数。