From 8480b10b70bf09f204597441a1f8c2496c455863 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期三, 10 七月 2024 15:39:42 +0800
Subject: [PATCH] 教学资源增加上传类型
---
src/components/UploadC.vue | 81 ++++++++++++++------------
src/views/education/resource/list.vue | 89 +++++++++++++++++++++++------
2 files changed, 114 insertions(+), 56 deletions(-)
diff --git a/src/components/UploadC.vue b/src/components/UploadC.vue
index 1a2e57f..9ce5862 100644
--- a/src/components/UploadC.vue
+++ b/src/components/UploadC.vue
@@ -1,13 +1,14 @@
<template>
<div>
<el-upload :action="uploadUrl" :show-file-list="true" :limit="uploadNum" :accept="acceptList" multiple
- :file-list="fileUrl" :on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleUploadSuccess"
- :before-upload="beforeUpload">
+ :file-list="fileUrl" :on-remove="handleRemove" :before-remove="beforeRemove"
+ :on-success="handleUploadSuccess"
+ :before-upload="beforeUpload">
<el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
- <div slot="tip" class="el-upload__tip">鍙兘涓婁紶pdf銆乵p4銆乤vi銆乸ng銆乯pg銆乯pge鏂囦欢锛屼笖涓嶈秴杩噞{ fileSizeLimitM }}M</div>
+ <div slot="tip" class="el-upload__tip">鍙兘涓婁紶pdf銆乵p3銆乵p4銆乤vi銆亀ebm銆乸ng銆乯pg銆乯pge銆乨oc銆乨ocx銆亁ls銆亁lsx銆乸pt銆乸ptx鏂囦欢锛屼笖涓嶈秴杩噞{ fileSizeLimitM }}M</div>
<div v-if="fileUrl && fileUrl.length > 0 && uploadNum === 1">
<video controls class="returnShow" v-if="fileType === 'video'" :src="'/api/files/' + fileUrl[0].url"></video>
- <img class="returnShow" v-if="fileType === 'img'" :src="'/api/files/' + fileUrl[0].url" />
+ <img class="returnShow" v-if="fileType === 'img'" :src="'/api/files/' + fileUrl[0].url"/>
</div>
</el-upload>
</div>
@@ -16,7 +17,7 @@
<script>
export default {
- name: "UploadC",
+ name: 'UploadC',
props: {
uploadNum: {
required: false,
@@ -38,67 +39,73 @@
default: () => []
}
},
- data() {
+ data () {
return {
- uploadUrl: "http://localhost:8000/api/upload/upload",
+ uploadUrl: 'http://localhost:8000/api/upload/upload',
fileTypeList: {
- 'video': ['mp4', 'avi'],
+ 'video': ['mp4', 'avi', 'webm'],
'img': ['jpg', 'png', 'jpeg'],
'pdf': ['pdf'],
+ 'word': ['doc', 'docx'],
+ 'excel': ['xlsx', 'xls'],
+ 'audio': ['mp3'],
+ 'ppt': ['ppt', 'pptx'],
'file': ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'png', 'jpg', 'jpeg', 'pdf'],
}
- };
+ }
},
methods: {
- clearFile() {
- this.fileUrl = [];
+ clearFile () {
+ this.fileUrl = []
+
},
- beforeRemove(file, fileList) {
- if (file && file.status === "success") {
- return this.$confirm(`纭畾绉婚櫎 ${file.name}锛焋);
+ beforeRemove (file, fileList) {
+ if (file && file.status === 'success') {
+ return this.$confirm(`纭畾绉婚櫎 ${file.name}锛焋)
}
},
- handleRemove(file, fileList) {
- this.$emit('removeFile', this.fileUrl, file.name);
+ handleRemove (file, fileList) {
+ this.$emit('removeFile', this.fileUrl, file.name)
},
- handleUploadSuccess(res, file) {
- this.fileUrl.push(res.data);
- this.$emit('getUploadUrl', this.fileUrl);
+ handleUploadSuccess (res, file) {
+ this.fileUrl.push(res.data)
+ this.$emit('getUploadUrl', this.fileUrl)
},
- beforeUpload(file) {
- const { type } = file;
- const typeList = this.fileTypeList[this.fileType];
- let limitType = true;
+ beforeUpload (file) {
+ const fileName = file.name // 鑾峰彇鏂囦欢鍚�
+ const extension = fileName.split('.').pop() // 鎻愬彇鎵╁睍鍚�
+ const typeList = this.fileTypeList[this.fileType]
+ let limitType = true
if (typeList) {
const tempType = typeList.find(item => {
- if (type.includes(item)) {
- return true;
+ if (extension.toLowerCase() === item) {
+ return true
} else {
- return false;
+ return false
}
- });
+ })
if (!tempType) {
- this.$message.error(`璇蜂笂浼犳纭殑鏂囦欢鏍煎紡锛乣);
- limitType = false;
+ this.$message.error(`璇蜂笂浼犳纭殑鏂囦欢鏍煎紡锛乣)
+ limitType = false
}
}
- const limit = file.size / 1024 / 1024 < this.fileSizeLimitM;
+ const limit = file.size / 1024 / 1024 < this.fileSizeLimitM
if (!limit) {
- this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSizeLimitM}MB!`);
+ this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSizeLimitM}MB!`)
}
- return limitType && limit;
+ return limitType && limit
},
},
computed: {
- acceptList() {
- let temp = '.*';
+ acceptList () {
+ let temp = '.*'
if (this.fileTypeList[this.fileType]) {
- temp = this.fileTypeList[this.fileType].map(item => '.' + item).join(',');
+ temp = this.fileTypeList[this.fileType].map(item => '.' + item).join(',')
}
- return temp;
+ return temp
}
}
-};
+}
</script>
<style scoped>
diff --git a/src/views/education/resource/list.vue b/src/views/education/resource/list.vue
index cde0a54..33d6b76 100644
--- a/src/views/education/resource/list.vue
+++ b/src/views/education/resource/list.vue
@@ -17,6 +17,16 @@
</el-option>
</el-select>
</el-form-item>
+ <el-form-item label="鏂囦欢绫诲瀷">
+ <el-select v-model="searchForm.contentType" clearable @clear="page" @change="page" placeholder="鏂囦欢绫诲瀷">
+ <el-option
+ v-for="item in contentTypeList"
+ :key="item.value"
+ :label="item.name"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
<el-form-item>
<el-button type="primary" @click="page" size="small">鏌ヨ</el-button>
</el-form-item>
@@ -46,8 +56,14 @@
class="showContent"></el-image>
<!-- <img v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url"
class="showContent" /> -->
- <el-link type="primary" v-if="scope.row.contentType === 'pdf'" class="showContent"
- @click="checkPdf('/api/files/' + scope.row.contentUrl.url)">鐐瑰嚮鏌ョ湅
+ <audio controls v-if="scope.row.contentType === 'audio'"
+ class="showContent">
+ <source :src="'/api/files/' + scope.row.contentUrl.url">
+ </audio>
+ <el-link type="primary"
+ v-if="scope.row.contentType !== 'video' && scope.row.contentType !== 'audio' && scope.row.contentType !== 'img'"
+ class="showContent"
+ @click="check(scope.row)">鐐瑰嚮鏌ョ湅
</el-link>
</template>
</el-table-column>
@@ -57,6 +73,13 @@
<el-link type="primary" :href="'/api/upload/download?url=' + item.url +'&fileName=' + item.name">
{{ item.name }}
</el-link>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="visitUrl" label="璁块棶閾炬帴">
+ <template slot-scope="scope">
+ <div v-if="scope.row.contentType === 'video'">
+ {{ scope.row.visitUrl }}
</div>
</template>
</el-table-column>
@@ -81,7 +104,7 @@
<el-form-item label="涓婚绠�浠�" prop="introduction">
<el-input v-model="form.introduction" placeholder="涓婚鍐呭"></el-input>
</el-form-item>
- <el-form-item label="鐝骇" >
+ <el-form-item label="鐝骇">
<el-select
v-model="form.classId"
placeholder="鐝骇"
@@ -98,9 +121,12 @@
</el-form-item>
<el-form-item label="鏂囦欢绫诲瀷" prop="contentType">
<el-select v-model="form.contentType" placeholder="涓嶅悓绫诲瀷鐨勬枃浠堕槄瑙堟柟寮忎笉鍚岋紝澶氫綑鏂囦欢璇蜂互闄勪欢褰㈠紡涓婁紶" @change="fileChange">
- <el-option label="瑙嗛" value="video"></el-option>
- <el-option label="PDF" value="pdf"></el-option>
- <el-option label="鍥剧墖" value="img"></el-option>
+ <el-option
+ v-for="item in contentTypeList"
+ :key="item.value"
+ :label="item.name"
+ :value="item.value">
+ </el-option>
</el-select>
</el-form-item>
<el-form-item label="涓婁紶鏂囦欢(涓�涓�)" prop="contentUrl">
@@ -147,12 +173,22 @@
dialogTitle: '娣诲姞瀛︿範鍐呭',
ids: [],
typeList: [],
+ contentTypeList: [
+ { name: '瑙嗛', value: 'video' },
+ { name: '鍥剧墖', value: 'img' },
+ { name: '闊抽', value: 'audio' },
+ { name: 'PDF', value: 'pdf' },
+ { name: 'EXCEL', value: 'excel' },
+ { name: 'WORD', value: 'word' },
+ { name: 'PPT', value: 'ppt' }
+ ],
classesIds: [],
searchForm: {
pageNum: 1,
pageSize: 5,
subjectId: null,
- introduction: null
+ introduction: null,
+ contentType: null
},
total: 0,
tableData: [],
@@ -169,10 +205,10 @@
},
rules: {
contentUrl: [
- { required: true, message: '璇蜂笂浼犳枃浠�', trigger: 'blur' },
+ { required: true, message: '璇蜂笂浼犳枃浠�', trigger: 'blur' }
],
introduction: [
- { required: true, message: '璇疯緭鍏ヤ富棰樺唴瀹�', trigger: 'blur' },
+ { required: true, message: '璇疯緭鍏ヤ富棰樺唴瀹�', trigger: 'blur' }
],
belongType: [
{ required: true, message: '璇烽�夋嫨瀛︿範鍒嗙被', trigger: 'change' }
@@ -190,9 +226,10 @@
this.classesIds = re.data.data
})
},
- checkPdf (url) {
- this.pdf = url
- this.pdfDialog = true
+ check (row) {
+ // this.pdf = url
+ // this.pdfDialog = true
+ window.open(row.visitUrl)
},
closePdfDialog () {
this.pdfDialog = false
@@ -213,9 +250,22 @@
if (row.contentType === 'img') {
return '鍥剧墖'
}
+ if (row.contentType === 'audio') {
+ return '闊抽'
+ }
if (row.contentType === 'pdf') {
return 'PDF'
}
+ if (row.contentType === 'excel') {
+ return 'EXCEL'
+ }
+ if (row.contentType === 'word') {
+ return 'WORD'
+ }
+ if (row.contentType === 'ppt') {
+ return 'PPT'
+ }
+
},
clearFile () {
this.form.contentUrl = []
@@ -244,13 +294,14 @@
batchRemove () {
if (this.ids.length < 1) {
this.$message.warning('璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁')
+ } else {
+ EducationResourceAPI.remove(this.ids).then(res => {
+ if (res.code === 1) {
+ this.$message.success('鍒犻櫎鎴愬姛')
+ this.ids = []
+ }
+ })
}
- EducationResourceAPI.remove(this.ids).then(res => {
- if (res.code === 1) {
- this.$message.success('鍒犻櫎鎴愬姛')
- this.ids = []
- }
- })
},
getTitle (typeName) {
return '纭畾瑕佸垹闄�' + typeName + '杩欎釜鏂囦欢鍚楋紵'
@@ -319,7 +370,7 @@
this.form.belongType = row.belongType
this.dialogTitle = '淇敼瀛︿範鍐呭'
this.open = true
- }
+ },
},
mounted () {
this.page()
--
Gitblit v1.8.0