|
|
@@ -0,0 +1,125 @@
|
|
|
+<template>
|
|
|
+ <div class="upload-wrapper">
|
|
|
+ <el-upload
|
|
|
+ ref="upload"
|
|
|
+ :limit="1"
|
|
|
+ action="no"
|
|
|
+ accept="audio/*"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :http-request="upload"
|
|
|
+ >
|
|
|
+ <div class="upload-audio">
|
|
|
+ <SvgIcon icon-class="upload" />
|
|
|
+ <span>上传音频</span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <div v-show="file_url.length > 0" class="file-wrapper">
|
|
|
+ <div class="file-name">{{ file_name }}</div>
|
|
|
+ <SvgIcon icon-class="delete" class-name="delete pointer" @click="deleteFile" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { fileUpload, GetFileStoreInfo } from '@/api/app';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'UploadFiles',
|
|
|
+ props: {
|
|
|
+ fileId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ file_id: '',
|
|
|
+ file_url: '',
|
|
|
+ file_name: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ fileId: {
|
|
|
+ handler(val) {
|
|
|
+ if (!val) return;
|
|
|
+ GetFileStoreInfo({ file_id: val }).then(({ file_id, file_url, file_name }) => {
|
|
|
+ this.file_id = file_id;
|
|
|
+ this.file_url = file_url;
|
|
|
+ this.file_name = file_name;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ beforeUpload(file) {
|
|
|
+ if (this.file_id.length > 0) {
|
|
|
+ this.$message.warning('只能上传一个音频文件');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const fileName = file.name;
|
|
|
+ const suffix = fileName.slice(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
|
|
|
+ if (!['mp3', 'wav', 'aac', 'm4a'].includes(suffix)) {
|
|
|
+ this.$message.warning('音频格式不正确');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ upload(file) {
|
|
|
+ fileUpload('Mid', file).then(({ file_info_list }) => {
|
|
|
+ if (file_info_list.length > 0) {
|
|
|
+ const { file_id, file_name, file_url } = file_info_list[0];
|
|
|
+ this.file_id = file_id;
|
|
|
+ this.file_url = file_url;
|
|
|
+ this.file_name = file_name;
|
|
|
+ this.$emit('upload', file_id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteFile() {
|
|
|
+ this.$confirm('是否删除当前音频文件？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$emit('deleteFile', this.file_id);
|
|
|
+ this.file_id = '';
|
|
|
+ this.file_url = '';
|
|
|
+ this.file_name = '';
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.upload-wrapper {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ .upload-audio {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+ width: 233px;
|
|
|
+ padding: 4px 12px;
|
|
|
+ background-color: $fill-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-wrapper {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .file-name {
|
|
|
+ padding: 4px 12px;
|
|
|
+ background-color: $fill-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha