Commit 65376b9c authored by 李维's avatar 李维

feat: 添加音频上传

parent 19323dcb
......@@ -28,6 +28,21 @@
<el-form-item label="小写">
<el-checkbox v-model="data.lowerCase" @change="save"></el-checkbox>
</el-form-item>
<el-form-item label="音频">
<div class="audio-uploader">
<el-upload
:action="uploadUrl"
:data="uploadData"
:on-success="(res, file) => handleAudioSuccess(res, file)"
:before-upload="beforeAudioUpload"
:show-file-list="false">
<el-button size="small" type="primary">{{ data.audio.url ? '重新上传' : '上传' }}</el-button>
&nbsp;&nbsp;&nbsp;&nbsp;
<span v-if="data.audio.url" class="filename" @click.stop="togglePlay()">{{ data.audio.name }}(点击播放)</span>
<audio :ref="'audio'" :src="data.audio.url" @ended.stop="audioEnded()" style="display: none;"></audio>
</el-upload>
</div>
</el-form-item>
</el-form>
</div>
</body>
......
......@@ -18,12 +18,22 @@ new Vue({
window.courseware.getData((dt) => {
if (dt) {
this.data = dt;
if(!this.data.audio) {
this.data.audio = {
url: '',
name: '',
size: 0,
duration: ""
}
}
}
},key);
// window['air'].getUploadCallback = (url, data) => {
// this.uploadUrl = url;
// this.uploadData = data;
// };
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
console.log('========== data ==========');
console.log(this.data);
},
data() {
return {
......@@ -31,8 +41,17 @@ new Vue({
data: {
letter: '',
upperCase: false,
lowerCase: false
lowerCase: false,
audio: {
url: '',
name: '',
size: 0,
duration: ""
}
},
uploadUrl: window.courseware.uploadUrl(),
uploadData: window.courseware.uploadData(),
isPlaying: false,
options: [
{label: 'A', value: 'A'},
{label: 'B', value: 'B'},
......@@ -60,10 +79,65 @@ new Vue({
{label: 'X', value: 'X'},
{label: 'Y', value: 'Y'},
{label: 'Z', value: 'Z'},
]
],
}
},
methods: {
handleAudioSuccess(res, file) {
// 假设上传接口返回的音频URL在 res.url 中
this.data.audio.url = res.url;
this.data.audio.name = file.name;
// 计算文件大小
const size = file.size;
if (size < 1024) {
this.data.audio.size = size + 'B';
} else if (size < 1024 * 1024) {
this.data.audio.size = (size / 1024).toFixed(2) + 'KB';
} else {
this.data.audio.size = (size / (1024 * 1024)).toFixed(2) + 'MB';
}
// 获取音频时长
const audio = new Audio(res.url);
audio.addEventListener('loadedmetadata', () => {
const duration = audio.duration;
const minutes = Math.floor(duration / 60);
const seconds = Math.floor(duration % 60);
this.data.audio.duration = `${minutes}:${seconds.toString().padStart(2, '0')}`;
});
this.save();
},
togglePlay() {
if(this.isPlaying) {
this.$refs.audio.pause();
} else {
this.$refs.audio.play();
}
this.isPlaying = !this.isPlaying;
},
audioEnded() {
this.isPlaying = false;
},
beforeAudioUpload(file) {
const isAudio = file.type.startsWith('audio/');
const isLt20M = file.size / 1024 / 1024 < 20;
if (!isAudio) {
this.$message.error('只能上传音频文件!');
return false;
}
if (!isLt20M) {
this.$message.error('音频大小不能超过 20MB!');
return false;
}
return true;
},
save() {
window.courseware.setData(this.data,() => {
this.$message.success('保存成功!');
......
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