laravel 开发youtube项目5-上传视频模型

67 阅读1分钟

安装大文件分块上传插件@mux/upchunk

npm install --save @mux/upchunk

此库将:

  • 将文件分割成块(256KB 的倍数)。
  • 针对每个块发出PUT请求,并为每个块指定正确的标头Content-Length。Content-Range
  • 失败时重试块上传。
  • 允许暂停和恢复上传。

前端模版

resources\views\livewire\upload-video.blade.php

<x-modal wire:model="modal" title="上传视频">
    <form x-data="{
    uploader: null,
        progress: 0,
        submit() {
        const file = $refs.file.files[0]

         console.log(file)
        }
    }">
        <div>
            <label class="flex w-full h-40 border-2 border-gray-400 border-dashed justify-center items-center"
                   for="video">
                <span>
                    <x-icon name="fas.upload" label="上传视频"/>
                </span>
                <input x-on:change.prevent="submit" x-ref="file" type="file" class="hidden" id="video">
            </label>
        </div>
    </form>
  
</x-modal>

测试效果图:

image.png