小节上传视频功能(前端)

1、nginx添加上传视频地址配置

2、在course/chapter.vue页面添加上传文件的组件

java 复制代码
<el-form-item label="上传视频">
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :action="BASE_API+'/eduvod/video/uploadVideo'"
            :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、修改course/chapter.vue页面实现js

java 复制代码
data() {
    return {
      courseId: "",
      saveBtnDisabled: false, // 保存按钮是否禁用
      allChapterVideo: [], //章节小节数据集合
      dialogChapterFormVisible: false, //章节添加修改表单是否展示
      chapter: {}, //章节信息
      dialogVideoFormVisible: false, //小节添加修改表单是否展示
      video: {}, //小节信息
      fileList: [], //上传文件列表
      BASE_API: process.env.BASE_API // 接口API地址
    };
  },

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

4、上传视频测试,出现了413错误

(1)nginx抛出问题,请求体过大

(2)修改nginx配置,重新加载生效

java 复制代码
client_max_body_size 1024m;

在cmd下运行命令:nginx.exe -s reload

相关推荐
智慧光迅AINOPOL3 小时前
园区全光网IP+POL架构怎么设计:组网拓扑与带宽演进
网络协议·tcp/ip·架构
沙蒿同学3 小时前
不引 Ghostscript:我用纯 Go 给 PDF 做了一场「压缩手术」
前端·后端·github
骑着蜗牛撵大象3273 小时前
语音变分录、规则挡幻觉:拆解开源 AI 记账系统 Smart Ledger 的全栈设计
人工智能·ai·架构·js·数据校验
变与不变8064 小时前
jQuery细节以及使用应用场景
前端·javascript·jquery
SailingCoder6 小时前
【封闭结束1】端到端交付:Agent 一次请求如何走完全链路
前端·安全·ai·面试·agent·harness
AI办公探索者6 小时前
从“岗位为中心”到“任务为中心”:企业级Agent Hub的架构演进
人工智能·架构
阡陌数智7 小时前
Mistral Large 4 深度拆解:细粒度 MoE 架构与安全 Agent 工程实战
安全·架构
forest_097 小时前
Agent 系列 21|部署、发布与运维:把 Agent 变成一个能上线、能放量、能撤回的服务
人工智能·机器学习·架构·prompt·agi
风骏时光牛马8 小时前
AI多模块协同自动化工作流
前端
zhangminghuan8 小时前
前端面试应对技巧
前端·面试·职场和发展