上传单个视频

1.vue中

注意：BASE_API就是后台api的地址，token自己设置，也可以删除，看后台需要

<el-upload class="avatar-uploader"
        :action="BASE_API"
        :headers="{
          'Authorization': token
        }"
        v-bind:on-progress="uploadVideoProcess"
        v-bind:on-success="handleVideoSuccess"
        v-bind:before-upload="beforeUploadVideo"
        v-bind:show-file-list="false">
        <video v-if="videoForm.showVideoPath !='' && !videoFlag"
                v-bind:src="videoForm.showVideoPath"
                class="avatar video-avatar"
                controls="controls" style="width:300px">
            您的浏览器不支持视频播放
        </video>
        <!-- <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
            class="el-icon-plus avatar-uploader-icon"></i> -->
            <el-button size="small" icon="el-icon-upload" type="primary" v-else-if="videoForm.showVideoPath =='' && !videoFlag">上传</el-button>
        <el-progress v-if="videoFlag == true"
            type="circle"
            v-bind:percentage="videoUploadPercent"
            style="margin-top:7px;">
        </el-progress>
      </el-upload>

//data
videoFlag: false,
//是否显示进度条
videoUploadPercent: "",
//进度条的进度，
isShowUploadVideo: false,
//显示上传按钮
videoForm: {
   showVideoPath: ''
}

//method函数
//上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
          console.log("请上传正确的视频格式");
           this.$message.error('请上传正确的视频格式');
          return false;
      }
      if (!fileSize) {
          console.log("视频大小不能超过50MB");
          this.$message.error('视频大小不能超过50MB');
          return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      console.log(res)
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if(res.success){
        this.videoForm.showVideoPath = res.data.url;
      }else{
         this.$message.error('上传视频失败');
      }
    }

2.larke-admin后台

/**
     * 上传图片
     *
     * @title 上传图片
     * @desc 上传图片
     * @order 572
     * @auth true
     *
     * @param  Request  $request
     * @return Response
     */
    public function uploadPic(Request $request)
    {
        $requestFile = $request->file('file');
        $dirName=$request->get('name');
        $totay=date('Y-m-d');
        if (empty($requestFile)) {
            return $this->error(__('上传文件不能为空2'));
            // return $this->success(__('上传文件成功'), '1');
        }
        
        // Pathname
        $pathname = $requestFile->getPathname();
        
        
        // 原始名称
        $name = $requestFile->getClientOriginalName();
       
        // mimeType
        $mimeType = $requestFile->getClientMimeType();
        
        // 扩展名
        $extension = $requestFile->extension();
        
        // 大小
        $size = $requestFile->getSize();
        
        $md5 = hash_file('md5', $pathname);
        
        $sha1 = hash_file('sha1', $pathname);
        
        $uploadService = UploadService::create();
        
        if ($uploadService === false) {
            return $this->error(__('上传文件失败'));
            
        }

        $uploadDisk = config('larkeadmin.upload.disk');
        
        $driver = $uploadDisk ?: 'local';
        
        $mimeType = $uploadService->getMimeType($requestFile,$extension);
        // return $this->error(__($extension));
        $filetype = $uploadService->getFileType($requestFile);
        
        $fileInfo = AttachmentModel::byMd5($md5)->first();
        if (!empty($fileInfo)) {

            @unlink($pathname);
            
            $fileInfo->update([
                'update_time' => time(), 
                'update_ip' => $request->ip(),
            ]);
            
            $res = [
                'id' => $fileInfo['id'],
            ];
            if (in_array($filetype, ['image', 'video', 'audio'])) {
                $res['url'] = $fileInfo['url'];
            }
            
            return $this->success(__('上传文件成功'), $res);
        }
        
        if ($filetype == 'image') {
            if($dirName){
                $uploadDir = config('larkeadmin.upload.directory.image').'/'.$dirName.'/'.$totay;
            }else{
                $uploadDir = config('larkeadmin.upload.directory.image').'/'.$totay;
            }
        } elseif ($filetype == 'video' || $filetype == 'audio') {
            if($dirName){
                $uploadDir = config('larkeadmin.upload.directory.media').'/'.$dirName.'/'.$totay;
            }else{
                $uploadDir = config('larkeadmin.upload.directory.media').'/'.$totay;
            }
        } else {
            $uploadDir = config('larkeadmin.upload.directory.file');
        }
        
        $path = $uploadService->dir($uploadDir)
            ->uniqueName()
            ->upload($requestFile);
        
        $adminId = app('larke-admin.auth-admin')->getId();
        $attachmentModel = AdminModel::where('id', $adminId)->first()->attachments();
        $attachment = $attachmentModel->create([
            'name' => $name,
            'path' => $path,
            'mime' => $mimeType,
            'extension' => $extension,
            'size' => $size,
            'md5' => $md5,
            'sha1' => $sha1,
            'driver' => $driver,
            'status' => 1,
        ]);

        
        if ($attachment === false) {
            $uploadService->destroy($path);
            return $this->success(__('上传文件成功'));
        }
        $res = [
            'id' => $attachment->id,
        ];
        if (in_array($filetype, ['image', 'video', 'audio'])) {
            $url = $uploadService->objectUrl($path);
            
            $res['url'] = $url;
        }
        
        // $res['name']=$name;
        return $this->success(__('上传文件成功'), $res);
    }

效果：

上传多个视频 

<el-form-item :label="$t('视频')" prop="video">
      <template v-for="item in (data.video||'').split(',')">
        <!-- <img v-image-preview :src="item" style="width:100px;" class="img"> -->
          <video
            v-if="data.video"
            v-bind:src="item"
            class="avatar video-avatar"
            controls="controls" style="width:300px">
            您的浏览器不支持视频播放
          </video>
          <i class="el-icon-delete" @click="deleteVideo(item)" v-if="data.video"></i>
        </template>
      <el-upload class="avatar-uploader"
        :action="BASE_API"
        :headers="{
          'Authorization': token
        }"
        v-bind:on-progress="uploadVideoProcess"
        v-bind:on-success="handleVideoSuccess"
        v-bind:before-upload="beforeUploadVideo"
        v-bind:show-file-list="false">
        <!-- <video v-if="videoForm.showVideoPath !='' && !videoFlag"
                v-bind:src="videoForm.showVideoPath"
                class="avatar video-avatar"
                controls="controls" style="width:300px">
            您的浏览器不支持视频播放
        </video> -->
        <!-- <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
            class="el-icon-plus avatar-uploader-icon"></i> -->
            <el-button size="small" icon="el-icon-upload" type="primary" style="position: absolute;bottom: 15px;margin-left: 20px;">上传</el-button>
        <el-progress v-if="videoFlag == true"
            type="circle"
            v-bind:percentage="videoUploadPercent"
            style="margin-top:7px;">
        </el-progress>
      </el-upload>
    </el-form-item>

//data
data: {
        video:''  //video是字符串，视频之间用逗号衔接
      },

//methods
//上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
          console.log("请上传正确的视频格式");
           this.$message.error('请上传正确的视频格式');
          return false;
      }
      if (!fileSize) {
          console.log("视频大小不能超过50MB");
          this.$message.error('视频大小不能超过50MB');
          return false;
      }
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      console.log(res)
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if(res.success){
        console.log(this.data.video)
        if(this.data.video){
          this.data.video= this.data.video+','+res.data['url']
        }else{
          this.data.video= res.data['url']
        }
        // this.videoForm.showVideoPath = res.data.url;
      }else{
         this.$message.error('上传视频失败');
      }
    },
    //删除视频
    deleteVideo(e){
      console.log(e)
      var video=this.data.video
      var li=video.split(',')
      //获取索引
      var index=li.indexOf(e);
      if(index>-1){
        //删除数组中的元素
        li.splice(index, 1)
      }
      //将数组转换成字符串
      this.data.video=li.join(',')
      console.log('此时的video',this.data.video)
    },

后台不需要做任何调整，后台返回数据：

效果图：

 

 样式自己调整啦~终于写好了，暴风哭泣