|
|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <v-row justify="center" align="center">
|
|
|
+ <v-col>
|
|
|
+ <v-card
|
|
|
+ class="mx-auto"
|
|
|
+ outlined
|
|
|
+ >
|
|
|
+ <v-row justify="center">
|
|
|
+ <v-col cols="10">
|
|
|
+ <h2>发布音频贴</h2>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <v-row justify="center">
|
|
|
+ <v-col>
|
|
|
+ <uploader
|
|
|
+ class="uploader-example"
|
|
|
+ :options="options"
|
|
|
+ :auto-start="true"
|
|
|
+ @file-added="onFileAdded"
|
|
|
+ @file-success="onFileSuccess"
|
|
|
+ @file-progress="onFileProgress"
|
|
|
+ @file-error="onFileError"
|
|
|
+ >
|
|
|
+ <uploader-unsupport />
|
|
|
+ <uploader-drop>
|
|
|
+ <p>拖动音频文件到此处或</p>
|
|
|
+ <uploader-btn :attrs="attrs">选择音频文件</uploader-btn>
|
|
|
+ </uploader-drop>
|
|
|
+ <uploader-list />
|
|
|
+ </uploader>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <v-divider />
|
|
|
+ <v-row justify="center">
|
|
|
+ <v-col cols="10">
|
|
|
+ <h2>稿件信息</h2>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <v-row justify="center">
|
|
|
+ <v-col cols="10">
|
|
|
+ <v-text-field
|
|
|
+ v-model="audioPost.title"
|
|
|
+ placeholder="标题"
|
|
|
+ label="标题(50字以内)"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ <v-row justify="center">
|
|
|
+ <v-col cols="10">
|
|
|
+ <v-btn large color="primary" @click="publish">立即投稿</v-btn>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </v-card>
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <v-snackbar
|
|
|
+ v-model="showMessage"
|
|
|
+ :top="true"
|
|
|
+ :timeout="3000"
|
|
|
+ >
|
|
|
+ {{ message }}
|
|
|
+ <template v-slot:action="{ attrs }">
|
|
|
+ <v-btn
|
|
|
+ color="pink"
|
|
|
+ text
|
|
|
+ v-bind="attrs"
|
|
|
+ @click="showMessage = false"
|
|
|
+ >
|
|
|
+ 关闭
|
|
|
+ </v-btn>
|
|
|
+ </template>
|
|
|
+ </v-snackbar>
|
|
|
+ </v-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { submitAudioPost } from '@/api/media/audio'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: {
|
|
|
+ target: '//api.reghao.cn' + '/api/file/upload/audio',
|
|
|
+ chunkSize: 1024 * 1024 * 1024 * 5, // 分片大小 5GiB
|
|
|
+ forceChunkSize: true,
|
|
|
+ fileParameterName: 'file',
|
|
|
+ maxChunkRetries: 3,
|
|
|
+ testChunks: true,
|
|
|
+ checkChunkUploadedByResponse: function(chunk, message) {
|
|
|
+ const objMessage = JSON.parse(message)
|
|
|
+ console.log('分片文件检验')
|
|
|
+ console.log(objMessage)
|
|
|
+ if (objMessage.skipUpload) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+
|
|
|
+ return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
|
|
|
+ },
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + this.$store.getters.token
|
|
|
+ }
|
|
|
+ },
|
|
|
+ attrs: {
|
|
|
+ accept: 'audio/*'
|
|
|
+ },
|
|
|
+ rules: [
|
|
|
+ value => !value || value.size < 1024 * 1024 * 100 || 'Avatar size should be less than 100 MB!'
|
|
|
+ ],
|
|
|
+ // 提交给后端的数据
|
|
|
+ audioPost: {
|
|
|
+ audioFileId: null,
|
|
|
+ audioUrl: null,
|
|
|
+ title: null
|
|
|
+ },
|
|
|
+ showMessage: false,
|
|
|
+ message: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onFileAdded(file) {
|
|
|
+ this.setTitle(file.file.name)
|
|
|
+ },
|
|
|
+ onFileProgress(rootFile, file, chunk) {
|
|
|
+ },
|
|
|
+ onFileSuccess(rootFile, file, response, chunk) {
|
|
|
+ const res = JSON.parse(response)
|
|
|
+ if (res.code === 0) {
|
|
|
+ const resData = res.data
|
|
|
+ this.message = '音频文件已上传'
|
|
|
+ this.showMessage = true
|
|
|
+ this.audioPost.audioFileId = resData.audioFileId
|
|
|
+ this.audioPost.audioUrl = resData.url
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onFileError(rootFile, file, response, chunk) {
|
|
|
+ console.log('文件上传错误')
|
|
|
+ },
|
|
|
+ publish() {
|
|
|
+ if (!this.audioPost.audioFileId) {
|
|
|
+ this.message = '你还没有上传音频'
|
|
|
+ this.showMessage = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.audioPost.title === '') {
|
|
|
+ this.message = '稿件标题不能为空'
|
|
|
+ this.showMessage = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ submitAudioPost(this.audioPost)
|
|
|
+ .then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.message = '投稿成功,等待审核通过后其他人就可以看到你的视频了'
|
|
|
+ this.showMessage = true
|
|
|
+ this.$router.push('/studio')
|
|
|
+ } else {
|
|
|
+ this.message = res.msg
|
|
|
+ this.showMessage = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error(error.message)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setTitle(title) {
|
|
|
+ if (title.length > 50) {
|
|
|
+ this.audioPost.title = title.substring(0, 50)
|
|
|
+ } else {
|
|
|
+ this.audioPost.title = title
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .uploader-example {
|
|
|
+ width: 500px;
|
|
|
+ padding: 15px;
|
|
|
+ margin: 40px auto 0;
|
|
|
+ font-size: 12px;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, .4);
|
|
|
+ }
|
|
|
+ .uploader-example .uploader-btn {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .uploader-example .uploader-list {
|
|
|
+ max-height: 440px;
|
|
|
+ overflow: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+</style>
|
