From 9083fd270cd172f998eb2dd3dfae59187a70cb1a Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Sat, 07 Oct 2023 09:31:11 +0800
Subject: [PATCH] Merge branch 'feature_1.0'
---
src/components/UploadExcel/index.vue | 253 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 253 insertions(+), 0 deletions(-)
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
new file mode 100644
index 0000000..ff357cd
--- /dev/null
+++ b/src/components/UploadExcel/index.vue
@@ -0,0 +1,253 @@
+<template>
+ <div>
+ <el-upload
+ :limit="limit"
+ :action="uploadUrl"
+ accept="image/*,video/*"
+ :data="{sysCode}"
+ :file-list="UrlList"
+ :headers="{ token: token }"
+ list-type="picture-card"
+ :before-upload="before_upload"
+ :on-change="handleImgChange"
+ :on-success="handleUploadSuccess"
+ >
+ <i slot="default" class="el-icon-plus" />
+ <div slot="file" slot-scope="{ file }">
+ <img
+ v-if="file.type == 1"
+ class="el-upload-list__item-thumbnail"
+ :src="file.url"
+ alt=""
+ >
+ <video v-if="file.type == 2" :src="file.url" style="width: 100%">
+ ������������������������ video ���������
+ </video>
+ <audio
+ v-if="file.type == 3"
+ controls
+ :src="file.url"
+ style="width: 100%"
+ >
+ ������������������������������������������
+ </audio>
+ <span class="el-upload-list__item-actions">
+ <span
+ class="el-upload-list__item-preview"
+ @click="handlePictureCardPreview(file)"
+ >
+ <i class="el-icon-zoom-in" />
+ </span>
+ <span
+ v-if="!disabled"
+ class="el-upload-list__item-delete"
+ @click="handleImgRemove(file)"
+ >
+ <i class="el-icon-delete" />
+ </span>
+ </span>
+ </div>
+ </el-upload>
+ <el-dialog :visible.sync="dialogVisible" width="600px" append-to-body :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
+ <div style="text-align: center;">
+ <img
+ v-if="dialogType == 1"
+ class="el-upload-list__item-thumbnail"
+ style="width: 300px;height: 500px"
+ :src="dialogImageUrl"
+ alt=""
+ >
+ <video
+ v-if="dialogType == 2"
+ ref="video"
+ style="width: 300px;height: 500px"
+ :src="dialogImageUrl"
+ controls
+ autoplay
+ />
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import { getToken } from '@/utils/auth'
+import bus from '@/Bus'
+export default {
+ name: 'UploadExcel',
+ props: {
+ uploadUrl: {
+ type: String,
+ required: true
+ },
+ sysCode: {
+ type: String,
+ required: true
+ }
+ },
+ data() {
+ return {
+ token: getToken(),
+ limit: 9, // ������������������
+ dialogImageUrl: null,
+ dialogVisible: false,
+ UrlList: [],
+ disabled: false,
+ dialogType: null,
+ fileBaseList: [],
+ fileChangeList: []
+ }
+ },
+
+ methods: {
+ handleCancel(e) {
+ this.dialogVisible = false
+
+ setTimeout(() => {
+ if (this.$refs.video) {
+ this.$refs.video.pause()
+ }
+
+ this.dialogImageUrl = ''
+ }, 200)
+ },
+ // ���������
+ before_upload(file) {
+ const fileSize = file.size
+ const FIVE_M = 100 * 1024 * 1024
+ // ���������������������2M
+ if (fileSize > FIVE_M) {
+ this.$message.error('������������1002M')
+ return false
+ }
+ const name = file.name.substring(file.name.lastIndexOf('.') + 1)
+ const nameList = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jpe', 'mp4', 'm2v', 'mkv']
+ if (!nameList.includes(name)) {
+ this.$message.error('������������������������������')
+ return false
+ }
+ return true
+ },
+
+ handlePictureCardPreview(file) {
+ console.log('file', file)
+ // const baseUrl = `${requestObj.baseUrl}/static/img/`
+ this.dialogImageUrl = file.url
+ console.log('this.dialogImageUrl', file)
+ this.dialogType = file.type
+ this.dialogVisible = true
+ },
+ // ������������
+ handleImgChange(file, fileList) {
+ bus.$emit('changeFileAfterList', 'change', fileList)
+
+ this.UrlList = fileList
+ },
+ // ������������
+ handleImgRemove(file, fileList) {
+ fileList = this.UrlList
+ const index = fileList.indexOf(file)
+ fileList.splice(index, 1)
+ bus.$emit('changeFileAfterList', 'detail', fileList)
+ },
+ // ������������������
+ handleUploadSuccess(response, file, fileList) {
+ console.log(file)
+ this.UrlList.push({
+ url: file.url
+ })
+ bus.$emit('changeFileAfterList', 'success', fileList)
+ file.type = this.matchType(file.response.data.fileName)
+ },
+
+ // ��������������������������� ������������
+ /*
+ * @param: fileName - ������������
+ * @param: ������������ 1) ��������������� - false
+ * @param: ������������ 2) ������������ - image
+ * @param: ������������ 8) ������ ������ - video
+ * @param: ������������ 9) ������ ������ - radio
+ * @param: ������������ 10) ��������������� - other
+ */
+ matchType(fileName) {
+ // ������������
+ var suffix = ''
+ // ������������������
+ var result = ''
+ try {
+ var flieArr = fileName.split('.')
+ suffix = flieArr[flieArr.length - 1]
+ } catch (err) {
+ suffix = ''
+ }
+ // fileName��������������� false
+ if (!suffix) {
+ result = false
+ return result
+ }
+ // ������������
+ var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jpe']
+ // ������������������
+ result = imglist.some(function(item) {
+ return item === suffix
+ })
+ if (result) {
+ result = '1'
+ return result
+ }
+ // ������ ������
+ var videolist = ['mp4', 'm2v', 'mkv']
+ result = videolist.some(function(item) {
+ return item === suffix
+ })
+ if (result) {
+ result = '2'
+ return result
+ }
+ // ������ ������
+ var radiolist = ['mp3', 'wav', 'wmv', 'flac']
+ result = radiolist.some(function(item) {
+ return item === suffix
+ })
+ if (result) {
+ result = '3'
+ return result
+ }
+ // ������ ������������
+ result = 'other'
+ return result
+ }
+
+ }
+}
+</script>
+<style lang="scss" scope>
+.avatar-uploader .el-upload {
+ border: 1px dashed #d9d9d9;
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+ border-color: #409eff;
+}
+.avatar-uploader-icon {
+ font-size: 28px;
+ color: #8c939d;
+ width: 148px;
+ height: 148px;
+ line-height: 148px;
+ text-align: center;
+}
+.avatar {
+ width: 148px;
+ max-height: 148px;
+ display: block;
+}
+.avatar-video {
+ width: 200px;
+ max-height: 200px;
+ display: block;
+}
+</style>
--
Gitblit v1.8.0