Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
dpe_video_editor
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
dpe_video_editor
Commits
40c2f0ab
Commit
40c2f0ab
authored
Jun 30, 2024
by
李维
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
更新组件
parent
c810faa8
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
293 additions
and
4 deletions
+293
-4
App.vue
form_vue/src/App.vue
+10
-2
AudioUploader.vue
form_vue/src/components/AudioUploader.vue
+151
-0
ImageUploader.vue
form_vue/src/components/ImageUploader.vue
+130
-0
VideoUploader.vue
form_vue/src/components/VideoUploader.vue
+2
-2
No files found.
form_vue/src/App.vue
View file @
40c2f0ab
<
template
>
<
template
>
<div
id=
"app"
>
<div
id=
"app"
>
<VideoUploader
v-model=
"itemData.url"
@
change=
"save"
/>
<VideoUploader
v-model=
"itemData.url"
@
change=
"save"
/>
<ImageUploader
v-model=
"itemData.image_url"
@
change=
"save"
/>
<AudioUploader
v-model=
"itemData.audio_url"
@
change=
"save"
/>
</div>
</div>
</
template
>
</
template
>
...
@@ -8,17 +10,23 @@
...
@@ -8,17 +10,23 @@
import
TimeRangeSelector
from
'
./components/TimeRangeSelector.vue
'
import
TimeRangeSelector
from
'
./components/TimeRangeSelector.vue
'
import
{
getSyllabusListById
,
getFirstCoursewareBySyllId
,
getPidPathName
}
from
'
@/api/syllabus
'
import
{
getSyllabusListById
,
getFirstCoursewareBySyllId
,
getPidPathName
}
from
'
@/api/syllabus
'
import
VideoUploader
from
'
./components/VideoUploader.vue
'
import
VideoUploader
from
'
./components/VideoUploader.vue
'
import
ImageUploader
from
'
./components/ImageUploader.vue
'
import
AudioUploader
from
'
./components/AudioUploader.vue
'
export
default
{
export
default
{
name
:
'
App
'
,
name
:
'
App
'
,
components
:
{
components
:
{
TimeRangeSelector
,
TimeRangeSelector
,
VideoUploader
VideoUploader
,
ImageUploader
,
AudioUploader
},
},
data
()
{
data
()
{
return
{
return
{
itemData
:
{
itemData
:
{
url
:
""
,
video_url
:
""
,
image_url
:
""
,
audio_url
:
""
}
}
};
};
},
},
...
...
form_vue/src/components/AudioUploader.vue
0 → 100644
View file @
40c2f0ab
<!-- 视频上传组件 -->
<
template
>
<div
style=
"position: relative; width: 360px; height: 80px;"
>
<el-upload
style=
"height: 100px;"
:data=
"uploadData"
:action=
"uploadUrl"
drag
accept=
".mp3"
:show-file-list=
"false"
:on-success=
"handleUploadSuccess"
>
<!-- 上传提示 -->
<i
v-show=
"!audioUrl"
class=
"el-icon-upload"
></i>
<div
v-show=
"!audioUrl"
class=
"el-upload__text"
>
将MP3文件拖到此处,或
<em>
点击上传
</em></div>
<!-- 音频预览 -->
<div
v-if=
"audioUrl"
>
<audio
:src=
"audioUrl"
controls
></audio>
</div>
</el-upload>
<!-- 下载 删除按钮 -->
<div
v-if=
"audioUrl"
class=
"buttons"
>
<!--
<el-button
type=
"ghost"
size=
"mini"
icon=
"el-icon-download"
@
click=
"download"
></el-button>
-->
<el-button
type=
"ghost"
size=
"mini"
icon=
"el-icon-delete"
@
click=
"deleteAudio"
></el-button>
</div>
</div>
</
template
>
<
script
>
import
SparkMD5
from
'
spark-md5
'
;
export
default
{
name
:
'
ImageUploader
'
,
props
:
{
value
:
{
type
:
String
,
default
:
''
},
},
watch
:
{
value
:
function
(
val
,
oldVal
)
{
this
.
audioUrl
=
val
}
},
data
()
{
return
{
// 上传地址
uploadUrl
:
""
,
// 上传附带的DATA
uploadData
:
""
,
// 图片地址
audioUrl
:
""
,
}
},
created
()
{
// 获取上传地址
this
.
uploadUrl
=
window
.
courseware
.
uploadUrl
();
this
.
uploadData
=
window
.
courseware
.
uploadData
();
window
[
'
air
'
].
getUploadCallback
=
(
url
,
data
)
=>
{
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
};
},
methods
:
{
handleUploadSuccess
(
e
)
{
this
.
audioUrl
=
e
.
url
;
this
.
$emit
(
"
input
"
,
this
.
audioUrl
);
this
.
$emit
(
'
change
'
,
{
url
:
this
.
audioUrl
});
},
async
download
()
{
const
url
=
this
.
audioUrl
const
fileName
=
url
.
split
(
'
/
'
).
pop
()
const
response
=
await
fetch
(
url
)
//发送GET请求
if
(
response
.
ok
)
{
const
blob
=
await
response
.
blob
()
//获取Blob对象
const
url
=
window
.
URL
.
createObjectURL
(
blob
)
//创建Blob对象的URL
const
link
=
document
.
createElement
(
'
a
'
)
//创建一个新的
<
a
>
元素
link
.
href
=
url
//设置
<
a
>
元素的
href
属性为
Blob
对象的
URL
link
.
download
=
fileName
//设置下载文件的文件名
document
.
body
.
appendChild
(
link
)
//将
<
a
>
元素添加到文档中
link
.
click
()
//模拟点击
<
a
>
元素以触发文件下载
this
.
$message
({
type
:
'
success
'
,
message
:
'
下载完成
'
});
}
else
{
//处理API响应失败的情况,例如显示错误消息
this
.
$message
({
type
:
'
error
'
,
message
:
'
下载失败
'
});
}
},
deleteAudio
()
{
this
.
$confirm
(
'
确定要删除吗?
'
,
'
提示
'
,
{
confirmButtonText
:
'
确定
'
,
cancelButtonText
:
'
取消
'
,
type
:
'
warning
'
}).
then
(()
=>
{
this
.
audioUrl
=
""
;
this
.
$emit
(
"
input
"
,
""
);
this
.
$emit
(
'
change
'
,
{
url
:
this
.
audioUrl
});
}).
catch
(()
=>
{
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
});
},
},
}
</
script
>
<
style
scoped
>
::v-deep
.el-upload
{
height
:
80px
;
}
::v-deep
.el-upload-dragger
{
height
:
80px
;
border
:
1px
dashed
#d9d9d9
;
border-radius
:
6px
;
/* background-color: #f7f7f7; */
color
:
#8c939d
;
font-size
:
14px
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
::v-deep
.el-icon-upload
{
font-size
:
36px
;
color
:
#c0c4cc
;
margin
:
0
10px
;
}
.buttons
{
text-align
:
center
;
position
:
absolute
;
right
:
0
;
top
:
0
;
}
.el-button
{
padding
:
4px
12px
;
font-size
:
18px
;
margin
:
0
;
border-radius
:
0
0
0
20px
;
}
</
style
>
\ No newline at end of file
form_vue/src/components/ImageUploader.vue
0 → 100644
View file @
40c2f0ab
<!-- 视频上传组件 -->
<
template
>
<div
style=
"position: relative; width: 360px; height: 180px;"
>
<el-upload
:data=
"uploadData"
:action=
"uploadUrl"
drag
accept=
".png,.jpg,.jpeg,.bmp,.gif"
:show-file-list=
"false"
:on-success=
"handleUploadSuccess"
>
<!-- 上传提示 -->
<i
v-show=
"!imageUrl"
class=
"el-icon-upload"
></i>
<div
v-show=
"!imageUrl"
class=
"el-upload__text"
>
将文件拖到此处,或
<em>
点击上传
</em><br/><span
style=
"font-size: 14px;"
>
只能上传
<strong>
jpg、png、jpeg、gif、bmp
</strong>
文件
</span></div>
<!-- 预览图片 -->
<div
v-if=
"imageUrl"
style=
"width: 100%; height: 100%;"
>
<el-image
style=
"width: 100%; height: 100%"
:src=
"imageUrl"
fit=
"contain"
></el-image>
</div>
</el-upload>
<!-- 下载 删除按钮 -->
<el-button-group
v-if=
"imageUrl"
class=
"buttons"
>
<el-button
type=
"ghost"
size=
"mini"
icon=
"el-icon-download"
@
click=
"download"
></el-button>
<el-button
type=
"ghost"
size=
"mini"
icon=
"el-icon-delete"
@
click=
"deleteImg"
></el-button>
</el-button-group>
</div>
</
template
>
<
script
>
import
SparkMD5
from
'
spark-md5
'
;
export
default
{
name
:
'
ImageUploader
'
,
props
:
{
value
:
{
type
:
String
,
default
:
''
},
},
watch
:
{
value
:
function
(
val
,
oldVal
)
{
this
.
imageUrl
=
val
}
},
data
()
{
return
{
// 上传地址
uploadUrl
:
""
,
// 上传附带的DATA
uploadData
:
""
,
// 图片地址
imageUrl
:
""
,
}
},
created
()
{
// 获取上传地址
this
.
uploadUrl
=
window
.
courseware
.
uploadUrl
();
this
.
uploadData
=
window
.
courseware
.
uploadData
();
window
[
'
air
'
].
getUploadCallback
=
(
url
,
data
)
=>
{
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
};
},
methods
:
{
handleUploadSuccess
(
e
)
{
this
.
imageUrl
=
e
.
url
;
this
.
$emit
(
"
input
"
,
this
.
imageUrl
);
this
.
$emit
(
'
change
'
,
{
url
:
this
.
imageUrl
});
},
async
download
()
{
const
url
=
this
.
imageUrl
const
fileName
=
url
.
split
(
'
/
'
).
pop
()
const
response
=
await
fetch
(
url
)
//发送GET请求
if
(
response
.
ok
)
{
const
blob
=
await
response
.
blob
()
//获取Blob对象
const
url
=
window
.
URL
.
createObjectURL
(
blob
)
//创建Blob对象的URL
const
link
=
document
.
createElement
(
'
a
'
)
//创建一个新的
<
a
>
元素
link
.
href
=
url
//设置
<
a
>
元素的
href
属性为
Blob
对象的
URL
link
.
download
=
fileName
//设置下载文件的文件名
document
.
body
.
appendChild
(
link
)
//将
<
a
>
元素添加到文档中
link
.
click
()
//模拟点击
<
a
>
元素以触发文件下载
this
.
$message
({
type
:
'
success
'
,
message
:
'
下载完成
'
});
}
else
{
//处理API响应失败的情况,例如显示错误消息
this
.
$message
({
type
:
'
error
'
,
message
:
'
下载失败
'
});
}
},
deleteImg
()
{
this
.
$confirm
(
'
确定要删除吗?
'
,
'
提示
'
,
{
confirmButtonText
:
'
确定
'
,
cancelButtonText
:
'
取消
'
,
type
:
'
warning
'
}).
then
(()
=>
{
this
.
imageUrl
=
""
;
this
.
$emit
(
"
input
"
,
""
);
this
.
$emit
(
'
change
'
,
{
url
:
this
.
imageUrl
});
}).
catch
(()
=>
{
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
});
},
},
}
</
script
>
<
style
scoped
>
.buttons
{
text-align
:
center
;
position
:
absolute
;
right
:
0
;
top
:
0
;
}
.buttons
.el-button
{
padding
:
4px
12px
;
font-size
:
18px
;
margin
:
0
;
border-radius
:
initial
;
}
</
style
>
\ No newline at end of file
form_vue/src/components/VideoUploader.vue
View file @
40c2f0ab
<!-- 视频上传组件 -->
<!-- 视频上传组件 -->
<
template
>
<
template
>
<div
style=
"position: relative; width: 360px; height:
18
0px;"
>
<div
style=
"position: relative; width: 360px; height:
22
0px;"
>
<el-upload
:data=
"uploadData"
:disabled=
"uploading || transcoding"
:action=
"uploadUrl"
drag
:before-upload=
"customReq"
accept=
".mp4"
:show-file-list=
"false"
>
<el-upload
:data=
"uploadData"
:disabled=
"uploading || transcoding"
:action=
"uploadUrl"
drag
:before-upload=
"customReq"
accept=
".mp4"
:show-file-list=
"false"
>
<!-- 上传提示 -->
<!-- 上传提示 -->
<i
v-show=
"!transcoding && !videoDone && !uploading"
class=
"el-icon-upload"
></i>
<i
v-show=
"!transcoding && !videoDone && !uploading"
class=
"el-icon-upload"
></i>
<div
v-show=
"!transcoding && !videoDone && !uploading"
class=
"el-upload__text"
>
将文件拖到此处,或
<em>
点击上传
</em></div>
<div
v-show=
"!transcoding && !videoDone && !uploading"
class=
"el-upload__text"
>
将
MP4
文件拖到此处,或
<em>
点击上传
</em></div>
<div
v-if=
"!transcoding && !videoDone && !uploading"
style=
"text-align: center;"
class=
"el-upload__tip"
slot=
"tip"
>
只能上传mp4文件
</div>
<div
v-if=
"!transcoding && !videoDone && !uploading"
style=
"text-align: center;"
class=
"el-upload__tip"
slot=
"tip"
>
只能上传mp4文件
</div>
<div
v-if=
"transcoding"
style=
"text-align: center;"
class=
"el-upload__tip"
slot=
"tip"
>
视频后台转码中,请稍后...
</div>
<div
v-if=
"transcoding"
style=
"text-align: center;"
class=
"el-upload__tip"
slot=
"tip"
>
视频后台转码中,请稍后...
</div>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment