07-前端整合视频上传

一、配置nginx反向代理

将接口地址加入nginx配置

location ~ /vod/ {           
    proxy_pass http://localhost:8003;
}

配置nginx上传文件大小，否则上传时会有 413 (Request Entity Too Large) 异常

打开nginx主配置文件nginx.conf，找到http，添加

client_max_body_size 1024m;

重启nginx

nginx -s reload

二、前端实现

1、数据定义

fileList: [],//上传文件列表
BASE_API: process.env.BASE_API // 接口API地址

2、整合上传组件

<el-form-item label="上传视频">
    <el-upload
           :on-success="handleVodUploadSuccess"
           :on-remove="handleVodRemove"
           :before-remove="beforeVodRemove"
           :on-exceed="handleUploadExceed"
           :file-list="fileList"
           :action="BASE_API+'/admin/vod/video/upload'"
           :limit="1"
           class="upload-demo">
    <el-button size="small" type="primary">上传视频</el-button>
    <el-tooltip placement="right-end">
        <div slot="content">最大支持1G，<br>
            支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
            GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
            MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
            SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
        <i class="el-icon-question"/>
    </el-tooltip>
    </el-upload>
</el-form-item>

3、方法定义

//成功回调
handleVodUploadSuccess(response, file, fileList) {
  this.video.videoSourceId = response.data.videoId
},
//视图上传多于一个视频
handleUploadExceed(files, fileList) {
  this.$message.warning('想要重新上传视频，请先删除已上传的视频')
},