javascript - 视频上传和流式传输(使用 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步:在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 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'));
}
推荐阅读
- excel - 基于多个单元格值的 Excel 条件格式热图
- actions-on-google - 如何通过 api 访问/管理 Actions on Google 项目
- php - 如果 setFetchBody 为 false,Laravel Imap 无法检查邮件是否有附件 | setFetchAttachment 没有任何效果
- c# - 如何使用 Xamarin 在 Android 上的图库中请求授权保存图像?
- python - python - 如何合并python中在特定键中具有相同值的字典列表?
- c# - 方法“实体”没有重载在实体框架中采用 1 个参数
- django - 如何将 JWT 令牌添加到 Django 中的凭据中
- python - 运行 tweepy 的气流任务以返回码 -6 退出
- jquery - 弹跳球动画手风琴
- java - 什么是将“_”替换为“|”的快捷键 在输入任何程序时?