预览和上传预览

src/views/book/courseware/create/components/base/upload_control/UploadControl.vue

@@ -0,0 +1,24 @@
+<template>
+  <ModuleBase :type="data.type">
+    <template #content> 学生上传文件控件 </template>
+  </ModuleBase>
+</template>
+
+<script>
+import { getUploadControlData } from '@/views/book/courseware/data/uploadControl';
+import ModuleMixin from '../../common/ModuleMixin';
+
+export default {
+  name: 'UploadCntrolPage',
+  components: {},
+  mixins: [ModuleMixin],
+  data() {
+    return {
+      data: getUploadControlData(),
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/book/courseware/create/components/base/upload_control/UploadControlSetting.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <el-form :model="property" :label-position="labelPosition" label-width="72px">
+      <SerailNumber :property="property" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
+import { viewMethodList } from '@/views/book/courseware/data/common';
+import { getUploadControlProperty } from '@/views/book/courseware/data/uploadControl';
+
+export default {
+  name: 'UploadControlSetting',
+  mixins: [SettingMixin],
+  data() {
+    return {
+      viewMethodList,
+      labelPosition: 'left',
+      property: getUploadControlProperty(),
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.el-form {
+  @include setting-base;
+}
+</style>

src/views/book/courseware/create/components/base/upload_preview/UploadPreview.vue

@@ -0,0 +1,62 @@
+<template>
+  <ModuleBase :type="data.type">
+    <template #content>
+      <UploadFile
+        :courseware-id="courseware_id"
+        :component-id="id"
+        :type="data.type"
+        :single-size="data.single_size"
+        :total-size="data.total_size"
+        :file-list="data.file_list"
+        :file-id-list="data.file_id_list"
+        :file-info-list="data.file_info_list"
+        :label-text="labelText"
+        :accept-file-type="acceptFileType"
+        :upload-tip="uploadTip"
+        :icon-class="iconClass"
+        @updateFileList="updateFileList"
+      />
+      <el-form :model="data" label-width="72px" label-position="left">
+        <el-form-item label="下载">
+          <el-radio-group v-model="data.is_enable_download">
+            <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value">
+              {{ label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </template>
+  </ModuleBase>
+</template>
+
+<script>
+import { getUploadPreviewData, switchOption } from '@/views/book/courseware/data/uploadPreview';
+import ModuleMixin from '../../common/ModuleMixin';
+import UploadFile from '../common/UploadFile.vue';
+
+export default {
+  name: 'UploadPreviewPage',
+  components: { UploadFile },
+  mixins: [ModuleMixin],
+  data() {
+    return {
+      data: getUploadPreviewData(),
+      switchOption,
+      labelText: '文件',
+      acceptFileType: '.png,.jpg,.pdf',
+      uploadTip:
+        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
+      iconClass: 'picture',
+    };
+  },
+  methods: {
+    updateFileList({ file_list, file_id_list, file_info_list }) {
+      this.data.file_list = file_list;
+      this.data.file_id_list = file_id_list;
+      this.data.file_info_list = file_info_list;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/book/courseware/create/components/base/upload_preview/UploadRreviewSetting.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <el-form :model="property" :label-position="labelPosition" label-width="72px">
+      <SerailNumber :property="property" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
+import { viewMethodList, snGenerationMethodList } from '@/views/book/courseware/data/common';
+import { getPictureProperty } from '@/views/book/courseware/data/picture';
+
+export default {
+  name: 'PictureSetting',
+  mixins: [SettingMixin],
+  data() {
+    return {
+      viewMethodList,
+      labelPosition: 'left',
+      property: getPictureProperty(),
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.el-form {
+  @include setting-base;
+}
+</style>

src/views/book/courseware/data/bookType.js

@@ -26,6 +26,11 @@ import FillPage from '../create/components/question/fill/Fill.vue';
 import FillSetting from '../create/components/question/fill/FillSetting.vue';
 import RecordInput from '../create/components/question/record_input/RecordInput.vue';
 import RecordInputSetting from '../create/components/question/record_input/RecordInputSetting.vue';
+import UploadControl from '../create/components/base/upload_control/UploadControl.vue';
+import UploadControlSetting from '../create/components/base/upload_control/UploadControlSetting.vue';
+import UploadPreview from '../create/components/base/upload_preview/UploadPreview.vue';
+import UploadRreviewSetting from '../create/components/base/upload_preview/UploadRreviewSetting.vue';
+
 
 import AudioPreview from '@/views/book/courseware/preview/components/audio/AudioPreview.vue';
 import DividerPreview from '@/views/book/courseware/preview/components/divider/DividerPreview.vue';
@@ -41,6 +46,8 @@ import SortPreview from '@/views/book/courseware/preview/components/sort/SortPre
 import VoiceMatrixPreview from '@/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue';
 import FillPreview from '@/views/book/courseware/preview/components/fill/FillPreview.vue';
 import RecordInputPreview from '../preview/components/record_input/RecordInputPreview.vue';
+import UploadControlPreview from '../preview/components/upload_control/UploadControlPreview.vue';
+import UploadPreviewPreview from '../preview/components/upload_preview/UploadPreviewPreview.vue';
 
 export const bookTypeOption = [
   {
@@ -97,6 +104,22 @@ export const bookTypeOption = [
         preview: PicturePreview,
       },
       {
+        value: 'upload_control',
+        label: '上传',
+        icon: 'upload',
+        component: UploadControl,
+        set: UploadControlSetting,
+        preview: UploadControlPreview,
+      },
+      {
+        value: 'upload_preview',
+        label: '上传预览',
+        icon: 'uploadPreview',
+        component: UploadPreview,
+        set: UploadRreviewSetting,
+        preview: UploadPreviewPreview,
+      },
+      {
         value: 'divider',
         label: '分割线',
         icon: 'divider',

src/views/book/courseware/data/uploadControl.js

@@ -0,0 +1,25 @@
+import {
+  displayList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+} from '@/views/book/courseware/data/common';
+
+export function getUploadControlProperty() {
+  return {
+    serial_number: 1, // 序号
+    sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
+    sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
+    sn_display_mode: displayList[0].value,
+  };
+}
+
+export function getUploadControlData() {
+  return {
+    type: 'upload_control',
+    title: '上传',
+    property: getUploadControlProperty(),
+    answer: {
+      answer_list: [],
+    },
+  };
+}

src/views/book/courseware/data/uploadPreview.js

@@ -0,0 +1,33 @@
+import {
+  displayList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+  switchOption,
+} from '@/views/book/courseware/data/common';
+export {  switchOption };
+
+export function getUploadPreviewProperty() {
+  return {
+    serial_number: 1, // 序号
+    sn_type: serialNumberTypeList[0].value, // 序号类型：letter字母 number数字  capital大写字母 bracket_number括号数字
+    sn_position: serialNumberPositionList[0].value, // 序号位置：top-start top top-end，left-start left left-end等
+    sn_display_mode: displayList[0].value,
+  };
+}
+
+export function getUploadPreviewData() {
+  return {
+    type: 'upload_preview',
+    title: '上传预览',
+    single_size: 20, // 单位MB
+    total_size: 100, // 单位MB
+    min_width: '144', // 大于等于最小缩略图宽度
+    min_height: '306', // 大于等于2倍缩略图宽度加间隙高度
+    property: getUploadPreviewProperty(),
+    file_info_list: [],
+    file_id_list: [], // 文件 id['20032-121212', '20032-121216']
+    // 内容中包含的文件列表,
+    file_list: [],
+    is_enable_download: switchOption[0].value,
+  };
+}

src/views/book/courseware/preview/components/upload_control/UploadControlPreview.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>预览开发中</div>
+  <!-- <UploadFile
+    :changeFillId="courseware_id"
+    :accept="acceptFileType"
+    :filleNumber="1"
+    :fileList="fileList"
+    :type="type"
+  /> -->
+</template>
+
+<script>
+import UploadFile from './compontents/UploadView.vue';
+
+export default {
+  name: 'UploadControlPreview',
+  components: { UploadFile },
+  data() {
+    return {
+      labelText: '文件',
+      acceptFileType: '.png,.jpg,.pdf',
+      uploadTip:
+        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
+      iconClass: 'picture',
+      fileList: [],
+      type: 'upload_control',
+    };
+  },
+  methods: {
+    updateFileList({ file_list, file_id_list, file_info_list }) {
+      this.data.file_list = file_list;
+      this.data.file_id_list = file_id_list;
+      this.data.file_info_list = file_info_list;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/book/courseware/preview/components/upload_control/compontents/UploadView.vue

@@ -0,0 +1,231 @@
+<!--  -->
+<template>
+  <div class="upload upload-view-npc">
+    <el-upload
+      :accept="accept"
+      class="upload-demo"
+      :action="url"
+      :on-preview="handlePreview"
+      multiple
+      :before-upload="handlebeforeUplaod"
+      :on-exceed="handleExceed"
+      :on-success="handleSuccess"
+      :on-change="handleChange"
+      :file-list="currentfileList"
+      :show-file-list="showList"
+      :limit="filleNumber"
+      :before-remove="beforeRemove"
+      :on-remove="handleRemove"
+    >
+      <div class="uploadBtn">
+        <img style="width: 24px; height: 24px" src="@/assets/uploadview.png" alt="" />
+        upload
+      </div>
+      <div slot="tip" style="display: block; padding: 0 10px" class="el-upload__tip">
+        {{ uploadTip }}
+      </div>
+    </el-upload>
+    <!-- <div class="zhezhao" v-loading.fullscreen.lock="fullscreenLoading"></div> -->
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth';
+export default {
+  components: {},
+  props: [
+    'uploadType',
+    'filleNumber',
+    'datafileList',
+    'changeFillId',
+    'deleteImg',
+    'index',
+    'uiType',
+    'fileList',
+    'accept',
+    'type',
+  ],
+  data() {
+    return {
+      currentfileList: [],
+      fileTypeName: '',
+      loading: false,
+      showList: false,
+      uploadTip:
+        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
+    };
+  },
+  computed: {
+    url() {
+      let userInfor = getToken();
+      let UserCode = '',
+        UserType = '',
+        SessionID = '';
+      if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+      }
+      return (
+        process.env.VUE_APP_BASE_API +
+        '/GCLSFileServer/WebFileUpload?UserCode=' +
+        UserCode +
+        '&UserType=' +
+        UserType +
+        '&SessionID=' +
+        SessionID +
+        '&SecurityLevel=Mid'
+      );
+    },
+  },
+  watch: {
+    datafileList: {
+      handler: function (val, oldVal) {
+        this.initUpload();
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    fileList(newval, oldval) {
+      this.currentfileList = newval || [];
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.currentfileList = this.fileList || [];
+    // this.showList = this.fileList ? true : false;
+    if (this.type == 'upload_control_preview_chs' || this.type == 'upload_pdf_chs') {
+      this.showList = true;
+    } else {
+      this.showList = false;
+    }
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.initUpload();
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
+  methods: {
+    handleChange(file, fileList) {},
+    handleSuccess(response, file, fileList) {
+      if (response.status == 1) {
+        response.duration = response.file_info_list[0].media_duration ? response.file_info_list[0].media_duration : 10;
+        this.$message.success('用户上传成功');
+        this.changeFillId(fileList, response.duration, this.index);
+        this.loading.close();
+      } else {
+        // this.fileList = [];
+        this.$message.warning(response.msg);
+        this.loading.close();
+      }
+    },
+    handlebeforeUplaod(file) {
+      if (file.type.indexOf('image/') != -1) {
+        if (file.size > 2 * 1024 * 1024) {
+          this.$message.warning('上传图片大小不能超过2M');
+          return false; //必须返回false
+        }
+      } else if (file.type.indexOf('application/pdf') != -1) {
+        if (file.size > 20 * 1024 * 1024) {
+          this.$message.warning('上传pdf大小不能超过20M');
+          return false; //必须返回false
+        }
+      } else {
+        if (file.size > 500 * 1024 * 1024) {
+          this.$message.warning('上传文件大小不能超过500M');
+          return false; //必须返回false
+        }
+      }
+
+      this.loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
+    },
+    handleRemove(file, fileList) {
+      this.changeFillId(fileList, '', this.index, this.index2);
+      this.$message.success('移除成功');
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handlePreview(file) {},
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 ${this.filleNumber ? this.filleNumber : 1} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`,
+      );
+    },
+    initUpload() {
+      switch (this.accept) {
+        case '.jpg, .jpeg, .png':
+          this.uploadTip = '只能上传.jpg, .jpeg, .png文件,大小不超过2MB';
+          break;
+        case 'audio/*':
+          this.uploadTip = '只能上传音频文件,大小不超过20MB';
+          break;
+        case 'video/*':
+          this.uploadTip = '只能上传视频文件,大小不超过500MB';
+          break;
+        case '.pdf':
+          this.uploadTip = '只能上传pdf文件,大小不超过20MB';
+          break;
+        case '.xls, .xlsx':
+          this.uploadTip = '只能上传excel文件,大小不超过20MB';
+          break;
+        case '.lrc':
+          this.uploadTip = '只能上传lrc文件,大小不超过20MB';
+          break;
+
+        default:
+          this.uploadName = '';
+          break;
+      }
+    },
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类;
+.uploadBtn {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 141px;
+  height: 39px;
+  margin: -20px auto 10px;
+  font-size: 16px;
+  line-height: 150%;
+  color: #000;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 10%);
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 10%);
+
+  img {
+    margin-right: 13px;
+  }
+}
+</style>
+<style lang="scss">
+.upload-view-npc {
+  .el-upload {
+    width: 100%;
+  }
+}
+</style>

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>预览开发中</div>
+  <!-- <UploadFile
+    :changeFillId="courseware_id"
+    :accept="acceptFileType"
+    :filleNumber="1"
+    :fileList="fileList"
+    :type="type"
+  /> -->
+</template>
+
+<script>
+import UploadFile from './compontents/UploadView.vue';
+
+export default {
+  name: 'UploadControlPreview',
+  components: { UploadFile },
+  data() {
+    return {
+      labelText: '文件',
+      acceptFileType: '.png,.jpg,.pdf',
+      uploadTip:
+        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
+      iconClass: 'picture',
+      fileList: [],
+      type: 'upload_control',
+    };
+  },
+  methods: {
+    updateFileList({ file_list, file_id_list, file_info_list }) {
+      this.data.file_list = file_list;
+      this.data.file_id_list = file_id_list;
+      this.data.file_info_list = file_info_list;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/book/courseware/preview/components/upload_preview/compontents/UploadView.vue

@@ -0,0 +1,231 @@
+<!--  -->
+<template>
+  <div class="upload upload-view-npc">
+    <el-upload
+      :accept="accept"
+      class="upload-demo"
+      :action="url"
+      :on-preview="handlePreview"
+      multiple
+      :before-upload="handlebeforeUplaod"
+      :on-exceed="handleExceed"
+      :on-success="handleSuccess"
+      :on-change="handleChange"
+      :file-list="currentfileList"
+      :show-file-list="showList"
+      :limit="filleNumber"
+      :before-remove="beforeRemove"
+      :on-remove="handleRemove"
+    >
+      <div class="uploadBtn">
+        <img style="width: 24px; height: 24px" src="@/assets/uploadview.png" alt="" />
+        upload
+      </div>
+      <div slot="tip" style="display: block; padding: 0 10px" class="el-upload__tip">
+        {{ uploadTip }}
+      </div>
+    </el-upload>
+    <!-- <div class="zhezhao" v-loading.fullscreen.lock="fullscreenLoading"></div> -->
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth';
+export default {
+  components: {},
+  props: [
+    'uploadType',
+    'filleNumber',
+    'datafileList',
+    'changeFillId',
+    'deleteImg',
+    'index',
+    'uiType',
+    'fileList',
+    'accept',
+    'type',
+  ],
+  data() {
+    return {
+      currentfileList: [],
+      fileTypeName: '',
+      loading: false,
+      showList: false,
+      uploadTip:
+        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
+    };
+  },
+  computed: {
+    url() {
+      let userInfor = getToken();
+      let UserCode = '',
+        UserType = '',
+        SessionID = '';
+      if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+      }
+      return (
+        process.env.VUE_APP_BASE_API +
+        '/GCLSFileServer/WebFileUpload?UserCode=' +
+        UserCode +
+        '&UserType=' +
+        UserType +
+        '&SessionID=' +
+        SessionID +
+        '&SecurityLevel=Mid'
+      );
+    },
+  },
+  watch: {
+    datafileList: {
+      handler: function (val, oldVal) {
+        this.initUpload();
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    fileList(newval, oldval) {
+      this.currentfileList = newval || [];
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.currentfileList = this.fileList || [];
+    // this.showList = this.fileList ? true : false;
+    if (this.type == 'upload_control_preview_chs' || this.type == 'upload_pdf_chs') {
+      this.showList = true;
+    } else {
+      this.showList = false;
+    }
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.initUpload();
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
+  methods: {
+    handleChange(file, fileList) {},
+    handleSuccess(response, file, fileList) {
+      if (response.status == 1) {
+        response.duration = response.file_info_list[0].media_duration ? response.file_info_list[0].media_duration : 10;
+        this.$message.success('用户上传成功');
+        this.changeFillId(fileList, response.duration, this.index);
+        this.loading.close();
+      } else {
+        // this.fileList = [];
+        this.$message.warning(response.msg);
+        this.loading.close();
+      }
+    },
+    handlebeforeUplaod(file) {
+      if (file.type.indexOf('image/') != -1) {
+        if (file.size > 2 * 1024 * 1024) {
+          this.$message.warning('上传图片大小不能超过2M');
+          return false; //必须返回false
+        }
+      } else if (file.type.indexOf('application/pdf') != -1) {
+        if (file.size > 20 * 1024 * 1024) {
+          this.$message.warning('上传pdf大小不能超过20M');
+          return false; //必须返回false
+        }
+      } else {
+        if (file.size > 500 * 1024 * 1024) {
+          this.$message.warning('上传文件大小不能超过500M');
+          return false; //必须返回false
+        }
+      }
+
+      this.loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
+    },
+    handleRemove(file, fileList) {
+      this.changeFillId(fileList, '', this.index, this.index2);
+      this.$message.success('移除成功');
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handlePreview(file) {},
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 ${this.filleNumber ? this.filleNumber : 1} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`,
+      );
+    },
+    initUpload() {
+      switch (this.accept) {
+        case '.jpg, .jpeg, .png':
+          this.uploadTip = '只能上传.jpg, .jpeg, .png文件,大小不超过2MB';
+          break;
+        case 'audio/*':
+          this.uploadTip = '只能上传音频文件,大小不超过20MB';
+          break;
+        case 'video/*':
+          this.uploadTip = '只能上传视频文件,大小不超过500MB';
+          break;
+        case '.pdf':
+          this.uploadTip = '只能上传pdf文件,大小不超过20MB';
+          break;
+        case '.xls, .xlsx':
+          this.uploadTip = '只能上传excel文件,大小不超过20MB';
+          break;
+        case '.lrc':
+          this.uploadTip = '只能上传lrc文件,大小不超过20MB';
+          break;
+
+        default:
+          this.uploadName = '';
+          break;
+      }
+    },
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类;
+.uploadBtn {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 141px;
+  height: 39px;
+  margin: -20px auto 10px;
+  font-size: 16px;
+  line-height: 150%;
+  color: #000;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 10%);
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 10%);
+
+  img {
+    margin-right: 13px;
+  }
+}
+</style>
+<style lang="scss">
+.upload-view-npc {
+  .el-upload {
+    width: 100%;
+  }
+}
+</style>