安装大文件分块上传插件@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>