|
|
@@ -1,217 +0,0 @@
|
|
|
-<!-- -->
|
|
|
-<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 SessionID = '';
|
|
|
- let UserCode = '';
|
|
|
- let UserType = '';
|
|
|
- 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(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}？`);
|
|
|
- },
|
|
|
- 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>
|
|
|
-.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>
|
natasha
