视频上传和流式传输（使用 Laravel VueJs 上传和显示所有类型的文件视频、图像、文档等）
Posted
技术标签:
【中文标题】视频上传和流式传输（使用 Laravel VueJs 上传和显示所有类型的文件视频、图像、文档等）【英文标题】：Video upload and stream (All type of file video,image,doc etc upload and display using Laravel VueJs) 【发布时间】：2020-12-16 19:43:27 【问题描述】：我已成功上传视频，但无法从 Laravel 存储/应用文件夹流式传输视频。
我的 Vue Js 代码
<video 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。
【问题讨论】：
我建议您检查视频是否通过127.0.0.1:8000/storage/app/candidate_video/7/6514082.mp4 加载，也许是在新的浏览器选项卡上。并且不要忘记关闭源标签。 不行请帮帮我 【参考方案1】：如果有人遇到同样的问题，请按照以下步骤操作
第 1 步：在 Controller 中创建以下方法用于文件上传、显示
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 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'));
【讨论】：
即上传和显示所有类型文件的完整代码 你能像 Instagram 一样使用这个上传多个图像/文件甚至单个图像或视频吗？以上是关于视频上传和流式传输（使用 Laravel VueJs 上传和显示所有类型的文件视频、图像、文档等）的主要内容，如果未能解决你的问题，请参考以下文章
如何以编程方式使用 AWS Media Convert 流式传输视频