提问人:ahmed gamal 提问时间:8/23/2023 最后编辑:aynberahmed gamal 更新时间:8/23/2023 访问量:92
我尝试使用laravel-chunk-upload,但视频未上传
i try use laravel-chunk-upload but video not uploaded
问:
我使用laravel-chunk-upload和resuamble.js上传带有块和进度条的大型视频
所有块都显示在文件夹块中,进度条可以完美运行,但视频未上传
控制器
public function uploadLargeFiles(Request $request) {
$receiver = new FileReceiver('file', $request, HandlerFactory::classFromRequest($request));
if (!$receiver->isUploaded()) {
throw new UploadMissingFileException();
}
$fileReceived = $receiver->receive(); // receive file
if ($fileReceived->isFinished()) { // file uploading is complete / all chunks are uploaded
$file = $fileReceived->getFile(); // get file
$extension = $file->getClientOriginalExtension();
$fileName = str_replace('.'.$extension, '', $file->getClientOriginalName()); //file name without extenstion
$fileName .= '_' . md5(time()) . '.' . $extension; // a unique file name
$disk = Storage::disk(config('filesystems.default'));
$path = $disk->putFileAs('videos', $file, $fileName);
// delete chunked file
unlink($file->getPathname());
return [
'path' => asset('storage/' . $path),
'filename' => $fileName
];
}
// otherwise return percentage informatoin
$handler = $fileReceived->handler();
return [
'done' => $handler->getPercentageDone(),
'status' => true
];
}
JS代码
<!-- jQuery -->
<script src="{{ asset("assets/js/jquery.js") }}" ></script>
<!-- Bootstrap JS Bundle with Popper -->
<script src="{{ asset("assets/js/bootstrap.bundle.min.js") }}" ></script>
<!-- Resumable JS -->
<script src="{{ asset("assets/js/resumable.js") }}"></script>
<script type="text/javascript">
let browseFile = $('#browseFile');
let resumable = new Resumable({
target: '{{ route('files.upload.large') }}',
query:{_token:'{{ csrf_token() }}'} ,// CSRF token
fileType: ['mp4'],
headers: {
'Accept' : 'application/json'
},
testChunks: false,
throttleProgressCallbacks: 1,
});
resumable.assignBrowse(browseFile[0]);
resumable.on('fileAdded', function (file) { // trigger when file picked
showProgress();
resumable.upload() // to actually start uploading.
});
resumable.on('fileProgress', function (file) { // trigger when file progress update
updateProgress(Math.floor(file.progress() * 100));
});
resumable.on('fileSuccess', function (file, response) { // trigger when file upload complete
response = JSON.parse(response)
$('#videoPreview').attr('src', response.path);
$('.card-footer').show();
});
resumable.on('fileError', function (file, response) { // trigger when there is any error
alert('file uploading error.')
});
let progress = $('.progress');
function showProgress() {
progress.find('.progress-bar').css('width', '0%');
progress.find('.progress-bar').html('0%');
progress.find('.progress-bar').removeClass('bg-success');
progress.show();
}
function updateProgress(value) {
progress.find('.progress-bar').css('width', `${value}%`)
progress.find('.progress-bar').html(`${value}%`)
}
function hideProgress() {
progress.hide();
}
</script>
我尝试上传带有进度条和块的视频,但视频未上传
答: 暂无答案
评论