vue+springboot前后端视频文件等的上传与展示（基于七牛云）

前言：在初步说明完成功能之前，我会把重要的部分说明下。后续我会细化。
线上网站点击访问

vue视频文件上传

其实这里和图片这些文件就是一样的。因为上传只是把我们想在云端展示的文件按等传输到云端的bucket。然后方便网站去请求引用。

有人问我我就说明下。这种东西无非就是照猫画虎，当然你是需要一些逻辑和一些基础的。

先看一下效果
这是我网站展示的效果。

网站地址兰舟千帆的个人博客
在这里呢可以浏览效果。

并且呢，单个视频可以独立放大全屏，可以控制倍数，音量进度。


做这个三大关键点，第一完成上传与下载的请求封装
第二：会看懂七牛云sdk
第三：会学习到vueplayer

后台上传显示为


里面这些限制性数据都可以进行修改

独立功能拆分前后端为

vue 前端
后端
一些信息需要自己去填写，数据库表存在变更。后端七牛云上传代码其实很固定，可以微调。前端需要用到vue-player和watch数据显示等。可以进行参考。前后端可以独立调试视频文件等上传下载。参考可以去做视听模块。

首先从前端
代码很多我把关键点和思路写一下。（具体可以查看链接地代码）
首先是上传按钮。

proButton是封装的组件，就是button。

   <proButton :info="'上传视频文件'" 
                         @click.native="addVideoResource()"
                         :before="$constant.before_color_1"
                        
                         :after="$constant.after_color_1">
   </proButton>

点击将触发一个方法

 addVideoResource(){
   
        if (this.addResourcePathDialog === false) {
   
          return;
        }
        if (this.$common.isEmpty(this.resourcePath.type)) {
   
          this.$message({
   
            message: "请选择有效资源类型！",
            type: "error"
          });
          return;
        }
        this.resourceVideoDialog = true;
      },

this.resourceVideoDialog = true;
将会让上传的视频的dialog显示出来

   <el-dialog title="视频"
              :visible.sync="resourceVideoDialog"
               width="35%"
               
               :append-to-body="true"
               destroy-on-close
               center>
      <div>
        <uploadVideo :isAdmin="true" :prefix="resourcePath.type+'LoveVideo'" @addVideo="addVideo" :maxSize="5"
                       :maxNumber="10"></uploadVideo>
      </div>
    </el-dialog>

uploadVideo 是封装的组件,其实主要就是el-upload的东西。
eg

  <el-upload
      class="upload-demo"
      ref="upload"
      multiple
      drag
      :action="$constant.qiniuUrl" 
      :on-change="handleChange"
      :before-upload="beforeUpload" 
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"           
      :http-request="customUpload"
      :list-type="listType"
      :accept="accept"
      :limit="maxNumber"
      :auto-upload="false">
      <div class="el-upload__text">
        <svg viewBox="0 0 1024 1024" width="40" height="40">
          <path
            d="M666.2656 629.4528l-113.7664-112.4864c-20.7872-20.5824-54.3232-20.5312-75.1104 0.1024l-113.3056 112.4864c-20.8896 20.736-21.0432 54.528-0.256 75.4688 20.736 20.8896 54.528 21.0432 75.4688 0.256l22.6304-22.4256v189.5936c0 29.44 23.9104 53.3504 53.3504 53.3504s53.3504-23.9104 53.3504-53.3504v-189.5424l22.6816 22.4256a53.1456 53.1456 0 0 0 37.5296 15.4112c13.7728 0 27.4944-5.2736 37.9392-15.8208 20.6336-20.9408 20.4288-54.7328-0.512-75.4688z"
            fill="#FFE37B"></path>
          <path
            d="M820.992 469.504h-5.376c-3.072-163.328-136.3456-294.8096-300.4416-294.8096S217.856 306.1248 214.784 469.504H209.408c-100.7104 0-182.3744 81.664-182.3744 182.3744s81.664 182.3744 182.3744 182.3744h209.7664V761.856c-30.208 5.5808-62.464-3.3792-85.6576-26.7264-37.3248-37.5808-37.0688-98.5088 0.512-135.7824l113.3056-112.4864c37.2224-36.9664 97.8432-37.0176 135.168-0.1536l113.7664 112.4864c18.2272 18.0224 28.3648 42.0864 28.5184 67.7376 0.1536 25.6512-9.728 49.8176-27.7504 68.0448a95.40096 95.40096 0 0 1-68.3008 28.5184c-5.9392 0-11.776-0.512-17.5104-1.5872v72.3456h209.7664c100.7104 0 182.3744-81.664 182.3744-182.3744S921.7024 469.504 820.992 469.504z"
            fill="#8C7BFD"></path>
        </svg>
        <div>拖拽上传 / 点击上传</div>
      </div>
      <template v-if="listType === 'video'">
        <div slot="tip" class="el-upload__tip">
          一次最多上传{
   {
   maxNumber}}个视频，且每个视频片不超过{
   {
   maxSize}}M！
        </div>
      </template>
      <template v-else>
        <div slot="tip" class="el-upload__tip">
          一次最多上传{
   {
   maxNumber}}个文件，且每个文件不超过{
   {
   maxSize}}M！
        </div>
      </template>

    </el-upload>

    <div style="text-align: center;margin-top: 20px">
      <el-button type="success" style="font-size: 12px" @click="submitUpload">
        上传
      </el-button>
    </div>

当然el绑定的这些方法我们都会写出来,里面有一些说明

  submitUpload() {
   
        this.$refs.upload.submit();//调用el组件的上传
      },
      // 点击提交，会将el-upload的内容提交，会转到自定义的customUpload
      customUpload(options) {
   
        options
        // options 是文件对象
        // 进行文件名分割处理
        let suffix = "";
        if (options.file