我有一个要上传视频文件的组件，在我的本地机器上一切正常，它过去在生产服务器上也能正常工作，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>
问题是在我的 Controller 的存储函数中上传时，生产服务器上的请求对象是空的，这是我在执行 dd($request->all()) 时得到的。然后它找不到视频，在网络检查器中我得到一个 404 错误，它由 firstOrFail() 方法返回，因为它找不到 视频模型，因为它缺少$request->uid。
No query results for model [App\Video].
这是 Controller :
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; name="video"; filename="Football Match Play.mp4" Content-Type: video/mp4
------WebKitFormBoundarywNIkEqplUzfumo0A Content-Disposition: form-data; name="uid"
159920a7878cb2 ------WebKitFormBoundarywNIkEqplUzfumo0A--
这真的很令人沮丧，因为我不知道如何解决这个问题，当我的本地机器上一切正常时，我不确定生产服务器上出了什么问题以及如何解决它？
更新
它自己又开始工作了，因为我在 Namecheap 支持服务中创建了一张票，一天后突然，它又开始工作了，我没有做任何更改，在询问 Namecheap 支持时我从他们那里得到的答复是他们也没有做任何更改，所以我不知道出了什么问题，这仍然有点令人沮丧，因为我想在将来避免这种情况，但至少现在一切正常了应该如此。
最佳答案
Laravel 的 $request->all() 方法只从输入中提取，因此在 VideoUploadController 的 store() 方法中 $request->all() 返回空对象。
在您的脚本中，它会在文件更改时检查 isVideo 为真后调用 this.store()。因此，没有 uid 参数或 video 参数。
关于javascript - Laravel\Vue - ajax 文件上传在生产服务器上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45650701/