[英]Laravel\Vue - ajax file upload not working on the production server
I have a component where I am uploading a video file, everything works fine on my local machine, and it used to work fine on the production server, Namechap is where I host the project, until only recently I have done some work and made changes, that I saw it doesn't work on the production server anymore. 我有一个组件,我上传一个视频文件,一切正常在我的本地机器上,它曾经在生产服务器上正常工作, Namechap是我托管项目的地方,直到最近我做了一些工作并进行了更改,我看到它不再适用于生产服务器。
I am using Vue v. 1.0.28 , and this is the upload component, where in the fileInputChange()
method I am posting form data, to the /upload
endpoint, which on the production server for some reason I can't read in the backend: 我正在使用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>
The problem is that on upload in my controller in the store function the request object is empty on the production server, which I got when I did dd($request->all())
. 问题是,在我的控制器中在store函数中上传请求对象在生产服务器上是空的,这是我在做
dd($request->all())
时得到的dd($request->all())
。 Then it fails to find the video, in the network inspector I get a 404
error, which is returned by firstOrFail()
method, because it can't find the Video model
, since it is missing $request->uid
. 然后它无法找到视频,在网络检查器中我得到
404
错误,这是由firstOrFail()
方法返回的,因为它找不到Video model
,因为它缺少$request->uid
。
No query results for model [App\\Video].
没有模型[App \\ Video]的查询结果。
This is the 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);
}
}
I am not sure what is going on, since on inspecting the network tab in the console I am sending a request payload that looks like this: 我不知道发生了什么,因为在检查控制台中的网络选项卡时,我发送的请求有效负载如下所示:
------WebKitFormBoundarywNIkEqplUzfumo0A Content-Disposition: form-data;
------ WebKitFormBoundarywNIkEqplUzfumo0A Content-Disposition:form-data; name="video";
NAME = “视频”; filename="Football Match Play.mp4" Content-Type: video/mp4
filename =“足球比赛Play.mp4”内容类型:视频/ mp4
------WebKitFormBoundarywNIkEqplUzfumo0A Content-Disposition: form-data;
------ WebKitFormBoundarywNIkEqplUzfumo0A Content-Disposition:form-data; name="uid"
NAME = “UID”
159920a7878cb2 ------WebKitFormBoundarywNIkEqplUzfumo0A--
159920a7878cb2 ------ WebKitFormBoundarywNIkEqplUzfumo0A--
It is really frustrating since I have no idea how to fix this, when everything is fine on my local machine, not sure what is wrong on the production server and how to fix it? 这真是令人沮丧,因为我不知道如何解决这个问题,当我的本地机器上的一切都很好,不确定生产服务器上有什么问题以及如何解决它?
Update 更新
It started working again on its own, since I have created a ticket in the Namecheap support service, all of sudden after one day, it started working again, I haven't done any changes, and on asking the Namecheap support I have got an answer from them that they haven't done any changes either, so I have no idea what went wrong, which is still a bit frustrating since I would like to avoid that in the future, but at least everything is working now again as it should. 它开始独立工作,因为我已经在Namecheap支持服务中创建了一张票,一天后突然间,它再次开始工作,我没有做任何更改,并且在询问Namecheap支持时我得到了一个从他们那里回答他们没有做任何改变,所以我不知道出了什么问题,这仍然有点令人沮丧,因为我希望将来避免这种情况,但至少现在一切都在工作了。
Laravel's $request->all()
method only pulls from the input, thus in the store()
method of VideoUploadController
$request->all()
return empty object. Laravel的
$request->all()
方法只从输入中拉出,因此在VideoUploadController
$request->all()
的store()
方法中返回空对象。
In your script, it calls this.store()
after checked the isVideo
is true while file changes. 在您的脚本中,它在文件更改后检查
isVideo
为true时调用this.store()
。 As a result, there isn't a uid
parameter or video
parameter. 因此,没有
uid
参数或video
参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.