Commit 40c2f0ab authored by 李维's avatar 李维

更新组件

parent c810faa8
<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: ""
} }
}; };
}, },
......
<!-- 视频上传组件 -->
<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
<!-- 视频上传组件 -->
<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
<!-- 视频上传组件 --> <!-- 视频上传组件 -->
<template> <template>
<div style="position: relative; width: 360px; height: 180px;"> <div style="position: relative; width: 360px; height: 220px;">
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment