Javascript 视频上传和流（使用Laravel VueJs上传和显示所有类型的文件视频、图像、文档等）

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

我的Vue Js代码

您的浏览器不支持视频标记。

---

videoFullPath状态值为

http://127.0.0.1:8000/storage/app/candidate_video/7/6514082.mp4

如果有人面临同样的问题，请遵循以下步骤

步骤1：在控制器中创建以下方法，用于文件上传、显示

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

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

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

-----注意创建用户\u视频列整数类型------

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

---

我建议您检查视频是否通过新的浏览器选项卡加载。而且别忘了关闭源标记。不工作plz帮助Metat是上传和显示所有类型文件的完整代码。您可以使用此工具上传多个图像/文件，甚至一个图像或视频，就像Instagram一样吗？是的，请按照所有步骤操作

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

     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';
        }
    }

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

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

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

            axios.get("/getCandidate").then((response) => {

                if(response.data.candidate){
                    this.videoUploadFile = candidate.user_video_file;
                }});

                                                 <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'));
    }