feat: 🎸 后台课程视频上传对接接口
This commit is contained in:
GoCo
parent
ee45ac1e90
commit
c4f1b2818b
@ -56,20 +56,21 @@ func (c *cUpload) UploadVideo(ctx context.Context, _ *common.UploadVideoReq) (re
|
||||
return
|
||||
}
|
||||
|
||||
m3u8UUID := uuid.New().String()
|
||||
|
||||
// 1. 保存上传视频到本地临时目录
|
||||
tmpDir := "./tmp/video"
|
||||
_, _ = file.Save(tmpDir)
|
||||
tmpFile := tmpDir + "/" + file.Filename
|
||||
_, _ = file.Save(tmpDir + "/" + m3u8UUID)
|
||||
tmpFile := tmpDir + "/" + m3u8UUID + "/" + file.Filename
|
||||
|
||||
// 2. 用ffmpeg切片为m3u8和ts文件
|
||||
|
||||
m3u8UUID := uuid.New().String()
|
||||
|
||||
hlsDir := "./tmp/hls/" + m3u8UUID
|
||||
_ = os.MkdirAll(hlsDir, 0755)
|
||||
|
||||
defer func() {
|
||||
os.RemoveAll(hlsDir)
|
||||
os.RemoveAll(tmpDir + "/" + m3u8UUID)
|
||||
}()
|
||||
|
||||
m3u8File := m3u8UUID + ".m3u8"
|
||||
@ -99,6 +100,8 @@ func (c *cUpload) UploadVideo(ctx context.Context, _ *common.UploadVideoReq) (re
|
||||
}
|
||||
}
|
||||
|
||||
m3u8MinioPath = storager.LastUrl(ctx, m3u8MinioPath, "minio")
|
||||
|
||||
// 4. 返回m3u8文件的minio路径
|
||||
return common.UploadVideoRes{
|
||||
Path: m3u8MinioPath,
|
||||
|
||||
@ -1,25 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
transform-origin="center"
|
||||
:title="formValue.id > 0 ? '编辑课程章节 #' + formValue.id : '添加课程章节'"
|
||||
:style="{
|
||||
<n-modal v-model:show="showModal" :mask-closable="false" :show-icon="false" preset="dialog"
|
||||
transform-origin="center" :title="formValue.id > 0 ? '编辑课程章节 #' + formValue.id : '添加课程章节'" :style="{
|
||||
width: dialogWidth,
|
||||
}"
|
||||
>
|
||||
}">
|
||||
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="formValue"
|
||||
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||
:label-width="100"
|
||||
class="py-4"
|
||||
>
|
||||
<n-form ref="formRef" :model="formValue" :label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||
:label-width="100" class="py-4">
|
||||
<n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
|
||||
<n-gi span="1">
|
||||
<n-form-item label="课程id" path="lessonId">
|
||||
@ -28,7 +16,16 @@
|
||||
</n-gi>
|
||||
<n-gi span="1">
|
||||
<n-form-item label="视频url" path="videoUrl">
|
||||
<n-input placeholder="请输入视频url" v-model:value="formValue.videoUrl" />
|
||||
<n-upload
|
||||
:action="`${uploadUrl}${urlPrefix}/upload/video`"
|
||||
:max="1"
|
||||
:show-file-list="false"
|
||||
:headers="uploadHeaders"
|
||||
@finish="handleVideoUpload"
|
||||
@before-upload="handleVideoUploadStart"
|
||||
>
|
||||
<n-button :loading="uploadingVideo">上传视频</n-button>
|
||||
</n-upload>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi span="1">
|
||||
@ -70,29 +67,42 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { Edit, View } from '@/api/lessonSection';
|
||||
import { State, newState } from './model';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import { Edit, View } from '@/api/lessonSection';
|
||||
import { State, newState } from './model';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
import { useUserStoreWidthOut } from '@/store/modules/user';
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const message = useMessage();
|
||||
const settingStore = useProjectSettingStore();
|
||||
const dict = useDictStore();
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const formRef = ref<any>({});
|
||||
const formBtnLoading = ref(false);
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(840);
|
||||
const globSetting = useGlobSetting();
|
||||
const urlPrefix = globSetting.urlPrefix || '';
|
||||
const { uploadUrl } = globSetting;
|
||||
|
||||
const useUserStore = useUserStoreWidthOut();
|
||||
const uploadHeaders = reactive({
|
||||
Authorization: useUserStore.token,
|
||||
uploadType: 'default',
|
||||
});
|
||||
|
||||
// 提交表单
|
||||
function confirmForm(e) {
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const message = useMessage();
|
||||
const settingStore = useProjectSettingStore();
|
||||
const dict = useDictStore();
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const formRef = ref<any>({});
|
||||
const formBtnLoading = ref(false);
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(840);
|
||||
});
|
||||
const uploadingVideo = ref(false);
|
||||
|
||||
// 提交表单
|
||||
function confirmForm(e) {
|
||||
e.preventDefault();
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
@ -110,16 +120,16 @@
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭表单
|
||||
function closeForm() {
|
||||
// 关闭表单
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 打开模态框
|
||||
function openModal(state: State) {
|
||||
// 打开模态框
|
||||
function openModal(state: State) {
|
||||
showModal.value = true;
|
||||
|
||||
// 新增
|
||||
@ -138,11 +148,30 @@
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
// 上传完成回调
|
||||
function handleVideoUpload({ file, event }) {
|
||||
uploadingVideo.value = false;
|
||||
let res = event?.target?.response
|
||||
? JSON.parse(event.target.response)
|
||||
: {};
|
||||
if (res.code === 0 && res.data?.path) {
|
||||
formValue.value.videoUrl = res.data.path;
|
||||
message.success('视频上传成功');
|
||||
} else {
|
||||
message.error(res.message || '视频上传失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 上传开始回调
|
||||
function handleVideoUploadStart() {
|
||||
uploadingVideo.value = true;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
Loading…
x
Reference in New Issue
Block a user