|
|
@@ -1,69 +1,107 @@
|
|
|
<template>
|
|
|
<div class="upload-wrapper">
|
|
|
+ <h5 v-if="uploadTitle" class="upload-title">{{ uploadTitle }}</h5>
|
|
|
<el-upload
|
|
|
ref="upload"
|
|
|
- :limit="1"
|
|
|
+ :limit="filleNumber"
|
|
|
action="no"
|
|
|
- accept="audio/*"
|
|
|
+ :accept="uploadType"
|
|
|
:show-file-list="false"
|
|
|
:before-upload="beforeUpload"
|
|
|
:http-request="upload"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
>
|
|
|
<div class="upload-audio">
|
|
|
- <SvgIcon icon-class="upload" />
|
|
|
- <span>上传音频</span>
|
|
|
+ <span>上传{{ fileTypeName }}</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 v-show="file_list_show.length > 0" class="file-wrapper">
|
|
|
+ <div v-for="(item, index) in file_list_show" :key="index" class="file-item">
|
|
|
+ <div class="file-name" @click="handlePreview(item.file_url)">
|
|
|
+ <SvgIcon icon-class="file-3-line" class-name="file-icon" /><span>{{ item.file_name }}</span>
|
|
|
+ </div>
|
|
|
+ <SvgIcon icon-class="delete" class-name="delete pointer" @click="deleteFile(item.file_id)" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ v-if="resourceFlag"
|
|
|
+ :visible.sync="resourceFlag"
|
|
|
+ :show-close="true"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ width="1200px"
|
|
|
+ class="file-dialog"
|
|
|
+ >
|
|
|
+ <iframe :src="resourceUrl" width="100%" height="600px"></iframe>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { fileUpload, GetFileStoreInfo } from '@/api/app';
|
|
|
+const Base64 = require('js-base64').Base64;
|
|
|
+import { getConfig } from '@/utils/auth';
|
|
|
|
|
|
export default {
|
|
|
name: 'UploadFiles',
|
|
|
props: {
|
|
|
- fileId: {
|
|
|
+ fileIdList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ filleNumber: {
|
|
|
+ type: Number,
|
|
|
+ default: 1,
|
|
|
+ },
|
|
|
+ fileTypeName: {
|
|
|
+ type: String,
|
|
|
+ default: '文件',
|
|
|
+ },
|
|
|
+ uploadType: {
|
|
|
+ type: String,
|
|
|
+ default: '*',
|
|
|
+ },
|
|
|
+ uploadTitle: {
|
|
|
type: String,
|
|
|
default: '',
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ file_list_show: [],
|
|
|
file_id: '',
|
|
|
file_url: '',
|
|
|
file_name: '',
|
|
|
+ resourceUrl: '', // 资源预览地址
|
|
|
+ resourceFlag: false,
|
|
|
+ file_preview_url: '',
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
- fileId: {
|
|
|
+ fileIdList: {
|
|
|
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;
|
|
|
+ if (!val.length === 0) return;
|
|
|
+ this.file_list_show = [];
|
|
|
+ val.forEach((item) => {
|
|
|
+ GetFileStoreInfo({ file_id: item }).then(({ file_id, file_url, file_name }) => {
|
|
|
+ let obj = {
|
|
|
+ file_id,
|
|
|
+ file_url,
|
|
|
+ file_name,
|
|
|
+ };
|
|
|
+ this.file_list_show.push(obj);
|
|
|
+ });
|
|
|
});
|
|
|
},
|
|
|
immediate: true,
|
|
|
},
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.file_preview_url = getConfig() ? getConfig().doc_preview_service_address : '';
|
|
|
+ },
|
|
|
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 }) => {
|
|
|
@@ -76,49 +114,86 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- deleteFile() {
|
|
|
- this.$confirm('是否删除当前音频文件？', '提示', {
|
|
|
+ deleteFile(id) {
|
|
|
+ this.$confirm('是否删除当前文件？', '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
|
|
})
|
|
|
.then(() => {
|
|
|
- this.$emit('deleteFile', this.file_id);
|
|
|
- this.file_id = '';
|
|
|
- this.file_url = '';
|
|
|
- this.file_name = '';
|
|
|
+ this.$emit('deleteFile', id);
|
|
|
this.$refs.upload.clearFiles();
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(
|
|
|
+ `当前限制选择 ${this.filleNumber ? this.filleNumber : 1} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
|
+ files.length + fileList.length
|
|
|
+ } 个文件`,
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 预览文件
|
|
|
+ handlePreview(url) {
|
|
|
+ let path = `${this.file_preview_url}/onlinePreview?url=${Base64.encode(url)}`;
|
|
|
+ this.resourceUrl = path;
|
|
|
+ this.resourceFlag = true;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.upload-wrapper {
|
|
|
- display: flex;
|
|
|
- column-gap: 12px;
|
|
|
- align-items: center;
|
|
|
- margin-top: 8px;
|
|
|
+ .upload-title {
|
|
|
+ margin: 0;
|
|
|
+ margin-bottom: 8px; // 因为这个title可能没有 所以给了bottom
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
|
|
|
.upload-audio {
|
|
|
display: flex;
|
|
|
column-gap: 12px;
|
|
|
align-items: center;
|
|
|
- width: 233px;
|
|
|
- padding: 4px 12px;
|
|
|
- background-color: $fill-color;
|
|
|
+ padding: 5px 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #fff;
|
|
|
+ background: #165dff;
|
|
|
+ border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
.file-wrapper {
|
|
|
- display: flex;
|
|
|
- column-gap: 12px;
|
|
|
- align-items: center;
|
|
|
+ .file-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
|
|
|
.file-name {
|
|
|
- padding: 4px 12px;
|
|
|
- background-color: $fill-color;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 360px;
|
|
|
+ padding: 7px 12px;
|
|
|
+ margin-right: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: $main-background-color;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ .file-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 12px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ > span {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
