From 3fccf2450a3ed31ceca512551858f886b30c499d Mon Sep 17 00:00:00 2001
From: liweilong <515897141@qq.com>
Date: 星期四, 24 十二月 2020 18:13:48 +0800
Subject: [PATCH] 上传视频组件
---
src/pages/system/admin.vue | 2
src/pages/demo/form.vue | 79 ++-------------
src/pages/system/roleEdit.vue | 4
src/components_simple/UploadSingleVideo.vue | 119 +++++++++++++++++++++++
src/pages/system/banner.vue | 87 +---------------
5 files changed, 141 insertions(+), 150 deletions(-)
diff --git a/src/components_simple/UploadSingleVideo.vue b/src/components_simple/UploadSingleVideo.vue
new file mode 100644
index 0000000..e7320c4
--- /dev/null
+++ b/src/components_simple/UploadSingleVideo.vue
@@ -0,0 +1,119 @@
+<template>
+ <div>
+ <el-upload
+ ref="refUploadVideo"
+ action="#"
+ :before-upload="beforeUploadVideo"
+ accept="video/mp4"
+ :limit="1"
+ :file-list="uploadVideos"
+ :on-change="addUploadImg"
+ :on-remove="delUploadImg"
+ :http-request="reqUploadVideo"
+ style="width: 200px"
+ >
+ <video
+ v-if="uploadVideos.length"
+ class="com-up-video"
+ :src="uploadVideos[0].url"
+ controls="controls"
+ >鎮ㄧ殑娴忚鍣ㄤ笉鏀寔瑙嗛鎾斁</video>
+ <template v-else>
+ <i class="el-icon-plus" />
+ <span>閫夋嫨瑙嗛</span>
+ </template>
+
+ </el-upload>
+ </div>
+</template>
+
+<script>
+import mixin_upload from '@/mixins/upload.js' // 閫氱敤涓婁紶瑙嗛棰勮
+export default {
+ mixins: [mixin_upload],
+ model: {
+ prop: 'uploadVideos',
+ event: 'change'
+ },
+ props: {
+ uploadVideos: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ accept: {
+ type: String,
+ default: () => {
+ return 'image/jpeg,image/jpg,image/gif,image/png'
+ }
+ }
+
+ },
+
+ data() {
+ return {
+ callback: null
+ }
+ },
+ methods: {
+ // 涓婁紶瑙嗛 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
+ // 涓婁紶鍓嶅洖璋�
+ beforeUploadVideo(file) {
+ var fileSize = file.size / 1024 / 1024 < 50
+ if (['video/mp4'].indexOf(file.type) === -1) {
+ this.$message.error('蹇呴』鏄痬p4鏂囦欢')
+ return false
+ }
+ if (!fileSize) {
+ this.$message.error('瑙嗛澶у皬涓嶈兘瓒呰繃50MB')
+ return false
+ }
+ this.isShowUploadVideo = false
+ },
+ // 澧炲姞瑙嗛
+ addUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鍒犻櫎瑙嗛
+ delUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+
+ // 涓婁紶瑙嗛
+ reqUploadVideo(res) {
+ const file = res.file
+ const formData = new FormData()
+ formData.append('file', file)
+ this.postFN({
+ url: 'admin/image/upload?type=1',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ imgUrl: 'https://www.w3school.com.cn/i/movie.mp4'
+ }
+ }
+ }, (inf) => {
+ // 鏇挎崲鎺夋湭涓婁紶鐨勫浘鐗�
+ this.$emit('change', [{ name: '瑙嗛', url: inf.imgUrl, status: 'success' }])
+
+ console.log('涓婁紶瑙嗛鎴愬姛涓旂粨鏉�')
+
+ // 鎻愪氦
+ // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
+ this.callback && this.callback(inf.imgUrl)
+ })
+ }
+ // 涓婁紶瑙嗛 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+ }
+}
+</script>
+
+<style>
+.el-upload-list__item{
+ transition: none;
+}
+</style>
diff --git a/src/pages/demo/form.vue b/src/pages/demo/form.vue
index e2ad338..bc6a36f 100644
--- a/src/pages/demo/form.vue
+++ b/src/pages/demo/form.vue
@@ -32,23 +32,11 @@
鍥剧墖锛�<br><span>(668*164鍍忕礌)</span>
</span>
<!-- 涓婁紶鍥剧墖缁勪欢(鍗曞浘) -->
- <el-upload
+ <UploadSingleImg
ref="refUploadImg"
- accept="image/jpeg,image/jpg,image/gif,image/png"
- :auto-upload="false"
- list-type="picture-card"
- :class="{disabled:uploadDisabled}"
- action="#"
- :limit="1"
- :file-list="mData.uploadImgs"
- :on-change="addUploadImg"
- :on-remove="delUploadImg"
- :http-request="uploadImg"
- :on-preview="uploadPreview"
- :before-upload="beforeUploadImg"
- >
- <i class="el-icon-plus" />
- </el-upload>
+ v-model="mData.uploadImgs"
+ @change.capture="$refs.refDialog.clearValidate()"
+ />
</el-form-item>
<el-form-item label="鏄惁涓婃灦锛�">
<el-switch v-model="mData.isUp" :active-value="1" :inactive-value="0" />
@@ -75,10 +63,11 @@
<script>
import WangEnduit from '@/components/WangEnduit' // 瀵屾枃鏈�
import mixin_upload from '@/mixins/upload.js' // 閫氱敤涓婁紶鍥剧墖棰勮
+import UploadSingleImg from '@/components_simple/UploadSingleImg'
import Area from '@/utils/area' // 鍦板尯閫夋嫨
export default {
name: 'DemoForm',
- components: { WangEnduit },
+ components: { WangEnduit, UploadSingleImg },
mixins: [
mixin_upload
],
@@ -159,62 +148,14 @@
},
// 瀵屾枃鏈浉鍏�
- // 涓婁紶鍥剧墖 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
- // 涓婁紶鍓嶇‘璁ゆ牸寮�
- beforeUploadImg(file) {
- const isImg = file.type.indexOf('image/') > -1
- if (!isImg) {
- this.$message.error('蹇呴』鏄�夋嫨鍥剧墖鏂囦欢')
- }
- return isImg
- },
- // 澧炲姞鍥剧墖
- addUploadImg(file, fileList) {
- this.mData.uploadImgs = fileList
- this.$refs.couponForm.validateField('uploadImgs')
- },
- // 鍒犻櫎鍥剧墖
- delUploadImg(file, fileList) {
- this.mData.uploadImgs = fileList
- },
- // 涓婁紶鍥剧墖
- uploadImg(res) {
- const file = res.file
- const formData = new FormData()
- formData.append('file', file)
- this.postFN({
- url: 'admin/image/upload',
- header: { 'Content-Type': 'multipart/form-data' },
- params: formData,
- mockData: {
- code: 100,
- msg: '',
- data: {
- imgUrl: 'xxxx'
- }
- }
- }, (inf) => {
- console.log('涓婁紶鍥炬垚鍔�')
- this.$set(this.mData, 'imgUrl', inf.imgUrl)
- console.log('涓婁紶鍥剧粨鏉�')
-
- // 涓婁紶瀹屽浘鐗�
- this.submitReq()
- })
- },
- // 涓婁紶鍥剧墖 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
-
submit() {
this.$refs['couponForm'].validate(valid => {
if (valid) {
- if (this.checkNeedUpload(this.mData.uploadImgs)) {
- console.log('寮�濮嬩笂浼犲浘鐗�')
- // 鍏堜笂浼犲浘鐗囷紝鍐嶆彁浜�
- this.$refs.refUploadImg.submit()
- } else {
- // 鎻愪氦
+ // 涓婁紶鍥剧墖
+ this.$refs.refUploadImg.runUploadImg((imgUrl) => {
+ imgUrl && this.$set(this.mData, 'imgUrl', imgUrl)
this.submitReq()
- }
+ })
}
})
},
diff --git a/src/pages/system/admin.vue b/src/pages/system/admin.vue
index bdf6a28..7d3f28f 100644
--- a/src/pages/system/admin.vue
+++ b/src/pages/system/admin.vue
@@ -85,7 +85,7 @@
/>
<!-- 鏂板&缂栬緫 -->
- <el-dialog :title="adminDialogData.type=='add'?'鏂板绠＄悊鍛�':'缂栬緫绠＄悊鍛�'" width="500px" :visible.sync="adminDialogVisible" append-to-body>
+ <el-dialog :title="adminDialogData.type=='add'?'鏂板绠＄悊鍛�':'缂栬緫绠＄悊鍛�'" width="500px" :visible.sync="adminDialogVisible" append-to-body :before-close="hideDialog">
<el-form ref="adminDialog" :model="adminDialogData" label-width="80px" :rules="rules" size="small">
<el-form-item label="鍚嶇О" prop="name">
<el-input v-model="adminDialogData.name" placeholder="璇疯緭鍏ュ悕绉�" />
diff --git a/src/pages/system/banner.vue b/src/pages/system/banner.vue
index f22319e..ff35688 100644
--- a/src/pages/system/banner.vue
+++ b/src/pages/system/banner.vue
@@ -64,24 +64,12 @@
<el-input v-model="dialogData.orderNum" placeholder="璇疯緭鍏ユ帓搴忓彿" />
</el-form-item>
<el-form-item ref="uploadFormItem" label="杞挱鍥撅細" prop="uploadImgs">
- <!-- 涓婁紶鍥剧墖缁勪欢(鍗曞浘) -->
- <el-upload
+ <!-- 涓婁紶鍥剧墖缁勪欢(澶氬浘) -->
+ <UploadSingleImg
ref="refUploadImg"
- accept="image/jpeg,image/jpg,image/gif,image/png"
- :auto-upload="false"
- list-type="picture-card"
- :class="{disabled:uploadDisabled}"
- action="#"
- :limit="1"
- :file-list="dialogData.uploadImgs"
- :on-change="addUploadImg"
- :on-remove="delUploadImg"
- :http-request="uploadImg"
- :on-preview="uploadPreview"
- :before-upload="beforeUploadImg"
- >
- <i class="el-icon-plus" />
- </el-upload>
+ v-model="dialogData.uploadImgs"
+ @change.capture="$refs[formName].clearValidate()"
+ />
</el-form-item>
<el-form-item label="璺宠浆绫诲瀷锛�" prop="jumpType">
<el-select
@@ -130,8 +118,10 @@
import mixin_Upload from '@/mixins/upload.js'
import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 閫氱敤杞挱鍥句笅鎷夐�夐」
+import UploadSingleImg from '@/components_simple/UploadSingleImg'
export default {
name: 'Equipment',
+ components: { UploadSingleImg },
mixins: [mixin_Upload, mixin_bannerOpts],
data() {
return {
@@ -192,66 +182,6 @@
init() {
this.getList()
},
-
- // 涓婁紶鍥剧墖 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
- // 涓婁紶鍓嶇‘璁ゆ牸寮�
- beforeUploadImg(file) {
- const isImg = file.type.indexOf('image/') > -1
- if (!isImg) {
- this.$message.error('蹇呴』鏄�夋嫨鍥剧墖鏂囦欢')
- }
- return isImg
- },
- // 澧炲姞鍥剧墖
- addUploadImg(file, fileList) {
- this.$refs.uploadFormItem.resetField()
- this.dialogData.uploadImgs = fileList
- },
- // 鍒犻櫎鍥剧墖
- delUploadImg(file, fileList) {
- this.dialogData.uploadImgs = fileList
- },
- // 鎵ц涓婁紶鍥�
- runUploadImg(suc_cb) {
- if (this.checkNeedUpload(this.dialogData.uploadImgs)) {
- this.$refs.refUploadImg.submit()
- } else {
- suc_cb && suc_cb()
- }
- },
- // 涓婁紶鍥�
- uploadImg(res) {
- console.log(res)
- const file = res.file
- const formData = new FormData()
- formData.append('file', file)
- console.log(formData)
- this.postFN({
- url: 'admin/image/upload',
- header: { 'Content-Type': 'multipart/form-data' },
- params: formData,
- mockData: {
- code: 100,
- msg: '',
- data: {
- imgUrl: 'xxxx'
- }
- }
- }, (inf) => {
- console.log('涓婁紶鍥剧墖鎴愬姛')
-
- // 鏇挎崲鎺夋湭涓婁紶鐨勫浘鐗�
- this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' }
- this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs))
- this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
-
- console.log('涓婁紶鍥剧墖缁撴潫')
-
- // 鎻愪氦
- this.submit(this.dialogData.type)
- })
- },
- // 涓婁紶鍥剧墖 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
// 鑾峰彇鍒楄〃
getList() {
@@ -351,7 +281,8 @@
this.$refs[this.formName].validate((valid) => {
if (valid) {
// 涓婁紶鍥剧墖
- this.runUploadImg(() => {
+ this.$refs.refUploadImg.runUploadImg((imgUrl) => {
+ imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
this.submit(type)
})
}
diff --git a/src/pages/system/roleEdit.vue b/src/pages/system/roleEdit.vue
index 101b692..2d4ff22 100644
--- a/src/pages/system/roleEdit.vue
+++ b/src/pages/system/roleEdit.vue
@@ -280,8 +280,8 @@
// background: #999;
}
.el-icon-check{
- background: #409EFF;
- // background: #999;
+ color: #409EFF;
+ // color: #999;
}
}
}
--
Gitblit v1.8.0