一 . WebUploader 下载使用
下载：
cnpm install webuploader --save需要下载 jQuery :
cnpm install jquery@1.12.4在 Vue 中引入 webUploader 和 jQuery：
注：先引入 jQuery 再引入 webUploader
import $ from 'jquery'import WebUploader from 'webuploader'二 . 前端 【Vue】
<template> <div class="component"> <div v-if="upCourseFile === false" class="uploader_box" @click="choose_file"> <div id="picker"></div> <i class="el-icon-upload video-uploader-icon"></i> </div> <div v-if="upCourseFile" class="videoBox"> <video :src="video_url" controls="controls" ></video> <i class="el-icon-delete"/> </div> <el-button type="danger" @click="upFile" >开始上传</el-button> <el-progress type="circle" v-bind:percentage="videoUploadPercent" ></el-progress> <div ref="img-thumb"></div> <div class="result"></div> </div></template><script>import $ from 'jquery'import WebUploader from 'webuploader'import domain from '@/utils/domain'import { getToken } from '@/utils/auth' // 验权export default { mixins: [], components: { }, data() { return { uploader: '', videoUploadPercent: 0, video_url: '', upCourseFile: false } }, created() { }, mounted() { var options = { fileVal: 'upFile', // 相当于 input标签的 name 属性，用于后台接收上传文件 swf:'@/webuploader-0.1.5/Uploader.swf', // swf文件路径 chunked: false, //是否要分片处理大文件 // chunkSize: 10*1024*1024,//分片文件大小,超出此大小会自动分片 // chunkRetry: 2, //如果某个分片由于网络问题出错，允许自动重传次数 threads: 3, //上传并发数 duplicate : false, // 防止多次上传 methods: 'POST', duplicate: false, // 是否允许上传多个文件 server: domain + "/course/upload", // 文件接收服务端。 pick: { id : '#picker', // 指定 picker 元素为上传文件的 DOM multiple : true // 是否支持多文件上传 }, resize: false, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ auto:false, //是否开启自动上传 accept: { //可上传文件类型 title: 'Only Images', extensions: 'gif,jpg,jpeg,bmp,png,mp4', // mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp' } } var uploader = WebUploader.create(options) this.uploader = uploader var that = this this.uploader.on('beforeFileQueued', function( file ) { console.log('文件加入队前',that.uploader.md5File( file )) }) // 当有文件被添加进队列的时候 this.uploader.on( 'fileQueued', function( file ) { console.log('文件加入队列后',that.uploader.getFiles()) that.video_url = that.uploader.getFiles() }) // 文件上传过程中创建进度条实时显示 this.uploader.on('uploadProgress', function( file, percentage ) { that.$store.dispatch('SetLoading', true) // 全局 Loading // console.log('文件上传中',file,percentage) that.videoUploadPercent = parseInt(percentage * 100) }) uploader.on( 'uploadSuccess ', function( file,response) { that.$store.dispatch('SetLoading', 0) // Loading 结束 console.log('成功',response) if(response.code === 200){ that.$message({ message: '上传成功', type: 'success' }) }else{ that.$message({ message: response.message || '系统繁忙', type: 'error' }) } }) uploader.on( 'error ', function( file) { that.$store.dispatch('SetLoading', 0) // Loading 结束 // console.log('err',file) }) uploader.on('uploadBeforeSend',function(block,data,header){ var file = block.file; var obj=new Object(); obj.fileName =file.name; obj.fileSize =file.size; obj.fileType =file.type; obj.fileFrom =file.fileFrom; obj.objectid =file.objectid; uploader.options.formData =obj; }) //手动停止 // uploader.stop() }, methods: { upFile() { // webuploader内置的upload函数，启动webuploader的上传 this.uploader.upload() }, choose_file() { // webUploader 包含 input 元素，触发选择文件事件 ,通过开发者工具查看元素 document.querySelector("#picker input").click() // 监听 webUploader 内部 input 元素的 change 事件，获取本地文件并预览 var that = this document.querySelector("#picker input").addEventListener('change',function(){ // console.log(event.target.files[0]) var reader = new FileReader() reader.readAsDataURL(event.target.files[0]) reader.onload = function (e) { that.video_url = e.target.result } that.upCourseFile = true }) } }}</script><style lang="scss" scoped>.component { .uploader_box{ width: 430px; height: 240px; border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position:relative; .video-uploader-icon { position:absolute; display:block; font-size: 60px; color: #8c939d; width: 430px; height: 240px; line-height: 240px; text-align: center; } &:hover { border-color: #FF6A00; .video-uploader-icon{ color: #FF6A00; } } } .videoBox { width: 430px; height: 240px; position:relative; video{ width: 100%; height: 100%; display: block; outline: none; object-fit:fill; // 自适应 border-radius: 6px; } i{ text-align:center; display:block; width:40px; height:40px; line-height:40px; border-radius:50%; position:absolute; font-size:20px; right:20px; top:20px; color:#fff; cursor:pointer; &:hover{ background-color:rgba(0,0,0,0.3) } } } }</style>三 . 后台 【PHP】
public function upload(Request $request) { $root = $request->server('DOCUMENT_ROOT'); // 指向 public 文件夹 $file = $_FILES['upFile']; $savePath = $root."\\video\\"; $saveName = time() . uniqid() . '_' . $file['name']; // 为文件重命名 $fullName = $savePath . $saveName; if (file_exists($fullName)) { // 文件名已存在 }else{ move_uploaded_file($file["tmp_name"], $fullName); $res = VIDEO_ACCESS_PATH.$saveName; } $posterName = time() . uniqid().".jpg"; $ffmpeg = FFMPEG_PATH; // 文件绝对路径 $video_route="C:/phpstudy_pro/WWW/course_study/public/video/".$saveName; // 视频的文件路径 $storage_route="C:/phpstudy_pro/WWW/course_study/public/video/".$posterName; // 图片保存路径 system($ffmpeg." -i ".$video_route." -y -f image2 -t 0.001 -s 200x200 ".$storage_route); // 运行命名 return response()->json($this->success()); }
