视频上传和流(所有类型的文件视频,图像,文档等使用Laravel VueJs上传和显示)



我已成功上传视频,但无法从Laravel存储/应用程序文件夹流式传输视频。

我的Vue Js代码

<video width="120" height="240" controls>
<source :src="videoFullPath" type="video/mp4">
Your browser does not support the video tag.
</video>

videoFullPath状态值为http://127.0.0.1:8000/storage/app/candidate_video/7/6514082.mp4

如果有人面临同样的问题,请按照以下步骤

步骤1:在控制器中创建以下方法以上传文件,显示

function manageUploads($file, $savepath, $gid = ""){
if ($gid == "" || $gid == null || $gid == 0) {
$maxGroupid = UploadFileGroups::max('file_group_id');
$file_group_id = $maxGroupid + 1;
} else {
$file_group_id = $gid;
}
$savepathgid = $savepath . '/' . $file_group_id;
$original_filename = $file->getClientOriginalName();
$extension = $file->getClientOriginalExtension();
//        $size = $file->getClientSize();
$name = rand(1111111, 9999999) . '.' . $extension;
Storage::putFileAs($savepathgid, $file, $name);
$uploadData['filename'] = $name;
$uploadData['original_filename'] = $original_filename;
$uploadData['filebasepath'] = $savepath;
$uploadData['filepath'] = $savepathgid;
$uploadData['upload_type'] = $extension;
$uploadData['upload_size'] = '0';
if ($extension == "jpg" || $extension == "jpeg" || $extension == "png" || $extension == "gif" || $extension == "JPG" || $extension == "JPEG" || $extension == "PNG" || $extension == "GIF") {
$uploadData['meme_type'] = "image";
}
else if($extension == "mp4" || $extension == "webm" ){
$uploadData['meme_type'] = "video";
}
else {
$uploadData['meme_type'] = "doc";
}
$upload = UploadFiles::create($uploadData);
if($upload){
if ($gid == "" || $gid == null) {
$maxGroupid = UploadFileGroups::max('file_group_id');
$gid = $maxGroupid + 1;
$uploadgroupData['file_group_id'] = $gid;
$uploadgroupData['file_id'] = $upload->id;
$uploadgroups = UploadFileGroups::create($uploadgroupData);
}
else{
$uploadgroupData['file_group_id'] = $file_group_id;
$uploadgroupData['file_id'] = $upload->id;
$uploadgroups = UploadFileGroups::create($uploadgroupData);
}
}
if($uploadgroups){
return $uploadgroups->file_group_id;
}
}
function displayFile($file_id){
$upload = UploadFiles::where('id', $file_id)->first(); 
if (!$upload) {
return response("Null Media File", 403);
}
$filePath = $upload->filepath . "/" . $upload->filename;
if (!Storage::exists($filePath)) {
if ($upload->meme_type == 'doc') {
return abort(404);
}
else {
return response('File Not Found', 403);
}
}
if ($upload->upload_type == "jpg") {
$type = 'image/jpeg';
} else if ($upload->upload_type == "gif") {
$type = 'image/gif';
} else if ($upload->upload_type == "png") {
$type = 'image/png';
} else if ($upload->upload_type == "PNG") {
$type = 'image/png';
} else if ($upload->upload_type == "pdf") {
$type = 'application/pdf';
} else if ($upload->upload_type == "doc") {
$type = 'application/msword';
} else if ($upload->upload_type == "docx") {
$type = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
} else if ($upload->upload_type == "ppt") {
$type = "application/vnd.ms-powerpoint";
} else if ($upload->upload_type == "pptx") {
$type = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
} else if ($upload->upload_type == "mp4") {
$type = "video/mp4";
} else if ($upload->upload_type == "webm") {
$type = "video/webm";
} else {
$type = 'image/jpeg';
}
header('Content-Type:' . $type);
return readfile(Storage::path($filePath));
}
function getFile($groupId) {
return UploadFileGroups::where('upload_file_groups.file_group_id', $groupId)
->leftJoin('upload_file', 'upload_file.id', 'upload_file_groups.file_id')
->select('upload_file.*')
->orderBy('id','desc')
->first();
}
function getImageFile($groupId){
return $data = UploadFileGroups::where('upload_file_groups.file_group_id', $groupId)
->join('upload_file', 'upload_file.id', 'upload_file_groups.file_id')
->select('upload_file.*')
->where('upload_file.meme_type','image')
->orderBy('upload_file.id', 'desc')
->first();
}
function getAllFiles($groupId) {
return $data = UploadFileGroups::where('upload_file_groups.file_group_id', $groupId)
->join('upload_file', 'upload_file.id', 'upload_file_groups.file_id')
->select('upload_file.*')
->orderBy('upload_file.id', 'desc')
->get();
}
public function deleteFile($id) {
$file = UploadFiles::where('id', $id)->first();
if($file){
$filelocation = $file->filepath;
$filename = $file->filename;
$filePath = $filelocation . '/' . $filename;
$filepathfull = Storage::path($filePath);
if (Storage::exists($filePath)) {
unlink($filepathfull);
UploadFileGroups::where('file_id', $id)->delete();
UploadFiles::where('id', $id)->delete();
return 'Deleted Successfully';
}
}
else{
return 'File Doesnot Exists';
}
}

步骤2在app.js中创建此函数

methods: {
getMedia: function (id) {
return window.location.origin + "/api/displayFile/" + id;
},

},

步骤3现在使用html视频标签

<video width="1220" height="240" controls>
<source :src="$root.getMedia(videoUploadFile.id)" 
type="video/mp4">
Your browser does not support the video tag.
</video>

步骤4:要播放视频,您必须使用user_video值提取文件

$candidate->user_video_file = $this->getFile($candidate->user_video);

步骤5,在vue-js部分,将视频文件分配到videoUploadFile状态

axios.get("/getCandidate").then((response) => {
if(response.data.candidate){
this.videoUploadFile = candidate.user_video_file;
}});

--------注意创建user_video列整数类型-----

步骤6,现在使用步骤1中声明的管理上传功能上传文件并将其作为整数值保存到数据库中

<input
ref="file"
type="file"
@change="
handleFile('image')
"
name="user_image"
accept="image/*"
id="cover-upload"
/>
handleFile(type) {
if (type == "image") {
this.form.userImage = this.$refs.file.files[0];
} else {
this.form.cv = this.$refs.cv.files[0];
}
axios.post("/addCandidateProfileImage", form).then((response) => {
if (type == 0) {
location.reload();
}
this.getCandidate();
});
},
addImage(id, type) {
var form = new FormData();
form.append("userImage", this.form.userImage);
form.append("userCV", this.form.cv);
form.append("id", id);
axios.post("/addCandidateProfileImage", form).then((response) => {
if (type == 0) {
location.reload();
}
this.getCandidate();
});
},
public function addCandidateProfileImage(Request $request)
{
if (isset($request->id)) {
$user = Candidate::find($request->id);
} else {
$user = new Candidate();
}
if ($image = $request->file('userImage')) {
$groupId = $user->user_image == 0 ? '' : $user->user_image;
$uploadGroupId = $this->manageUploads($image, $savepath = 'candidate', $groupId);
$user->user_image = $uploadGroupId;
}
if ($image = $request->file('userCV')) {
$groupId = $user->cv_id == 0 ? '' : $user->cv_id;
$uploadGroupId = $this->manageUploads($image, $savepath = 'candidate_cv', $groupId);
$user->cv_id = $uploadGroupId;
}
if ($video = $request->file('userVideo')) {
$candidate = Candidate::where('user_id', auth()->user()->id)->with('user')->first();
if ($candidate) {
$groupId = $candidate->user_video == 0 ? '' : $candidate->user_video;
$uploadGroupId = $this->manageUploads($video, $savepath = 'candidate_video', $groupId);
$candidate->user_video = $uploadGroupId;
$candidate->save();
return response()->json(compact('candidate'));
}
}
$user->save();
return response()->json(compact('user'));
}

最新更新