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/demo/form.vue | 79 +++++----------------------------------
1 files changed, 10 insertions(+), 69 deletions(-)
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()
- }
+ })
}
})
},
--
Gitblit v1.8.0