|
|
<template>
2 k5 p" F5 |3 l* `5 z$ U+ I <el-dialog
1 y! O& U# f S8 E title="上传"- `& y) v8 x) W! ]% B
:visible.sync="dialogVisible"8 _+ U( P4 P# C
width="40%"
0 T; G- z4 I. o% \! O :before-close="handleClose"- I4 j& _" Y, _& P+ ~- J' t% d
>) G' w/ j, B8 I' `7 G
<el-form ref="form" :model="form" size="small" label-width="80px">5 }# s, @/ }( y& W& u4 O7 P$ T3 S
<el-form-item label="文件名称:">, x# x$ {# F2 i
<el-input v-model="form.contitle" disabled></el-input>8 I/ J9 |$ [- L, J
</el-form-item>+ s; o1 e' p; Q$ _2 [. c# f U
<el-form-item label="文件上传:">
+ M* L" |1 q, h8 b, Q <div class="uppicture">
1 j" L1 r6 C9 Y3 N" M: y0 H+ r& A <input type="file" class="upinput" ref="file" @change="showimg" />
& W) T: t2 g$ \: t/ m, x <i class="el-icon-plus" id="changes" @click="changeimg"></i>
* p( a8 E. T7 P/ \0 m <p>上传文件图片附件</p>2 i( K+ P+ M6 m
</div> x8 y" M! O% k
<el-button type="primary" class="uploadbutton" @click="addupload">9 ]! R) n2 u4 ~# A+ D, C' b) p
上传附件
$ |2 d7 T4 K5 ^0 T. l% }: V </el-button>
: \- c: e& Z# f6 Q/ v! ]- t </el-form-item>
q" z6 M1 S% S9 ^0 Z) G# x </el-form>0 x6 P$ V" v& H, p2 f0 v1 D( N
<span slot="footer" class="dialog-footer">
# s6 j2 h/ r* _$ A8 W6 c' ]% ] <el-button @click="handleClose"
; I% _- b* d) e% Y$ Z style="background: #f7f7f7"
% L' i) H8 e4 C. r size="small">取消</el-button>
5 a, u" ]2 K- D: X </span>
3 }4 [& G5 d3 ~ [ </el-dialog>* I; P6 x7 S; X# _+ U0 q
</template>* M: Q7 A* T& U# O% ]
6 C0 R$ P7 b b<script>
- x% C6 n/ Q! f# ?/ E3 V// 从API中引入uploadvideo组件
9 s5 t' v) Y( V: Z* t" I. C7 `3 ^import { uploadvideo } from '@/utils/apis'! h' E! Y, X6 u
// 引入遮罩层组件
7 x: n+ m5 N- |import { Loading } from 'element-ui'
% [0 S# z6 q" N1 h) Aexport default {
6 ^1 J/ E9 d: S y$ | name: 'fileUpload',7 ^; K P$ w) u: n
data () {' ^: ?. m2 x: B3 _9 l! E0 n
return {& ?+ g+ k/ m2 Q# W; x. B" w
form: {
, ]$ e' c/ b. r! N! j# a6 i8 E // 文件名称9 ]- @* j. n- D h |( e3 i
contitle: '': i2 r" V) k" o7 M5 t7 b
},
; F* k( _ a) G( M- [! ~ formdata: {}
: t: \) X' k) y( R }8 w4 c9 K! h6 @- B# u* F
}," M+ {5 p0 s v' G2 E; \
props: {
6 K8 d& @1 Y$ F, B9 x // 显示隐藏6 U( i6 X: I0 p/ g- H
dialogVisible: {
h& h, d* K- ~ type: Boolean,
# l3 W! U- x" x0 t; s$ P // 必传/ x: Y- m$ j" X9 N/ C) q7 }
required: true# c: `+ Q& e3 X. i: J" E
}) _4 P% _* F; p
},
5 Y, d4 G9 @0 ?6 q& F methods: {
9 S! p! ]3 n) Q w7 L // 关闭之前# g& S* v9 A& q! r' `1 [
handleClose () {+ B3 q; k/ v4 y# z/ `9 d! q
console.log('关闭之前')4 u ?5 y4 i" ~7 P& r8 C2 \# l
// .sync语法糖,单向数据流问题,
; d' p% a6 k) V" Z' k- P! U // 父组件传递给子组件的数据,子组件直接修改会报错,需要传递给父组件修改
9 T* f8 R+ ?4 Z& A" `' S' z, W; n6 N this.$emit('update:dialogVisible', false)# x2 N- G$ @$ H- ?9 m
},) ^% v$ G+ P6 e0 d6 j) W
// 输入获取事件$ _9 Z2 H+ {! \( {' P4 ~& F! j
showimg () {8 p4 v! f0 S" @& U; x! B9 q# ?6 t
const that = this
5 u& _3 Q; I2 T; ]! |- G6 a0 z console.log(that.$refs.file)4 {6 N/ A' m3 O7 T; _! E
console.log(that.$refs.file.files[0])7 i, e+ _' o( x: _, r/ J0 v$ K
// 文件名复制% c2 V# ~% E! K
that.form.contitle = that.$refs.file.files[0].name5 G/ A3 m- X: V f1 n5 C
// 声明一个formdata对象3 x% S+ \2 W* r
this.formdata = new FormData()' A; _ s6 S4 \/ G& c: b8 i
// 赋值需要传递的文件
* f; _: G, { n this.formdata.append('multipartFile', that.$refs.file.files[0])
4 Y; O9 j, E* ]0 Y },/ C+ [+ X! E- x f
changeimg () {
' O4 | E# B D" F // 点击图标时候,触发input选择文件按钮
k' v: n, n# b5 W( ^ this.$refs.file.dispatchEvent(new MouseEvent('click'))( }8 D4 K- G& B W* I
},0 O" r+ ^7 R) B4 E- E- b4 h
// 上传附件8 z* @+ X* M2 P2 X7 K
async addupload () {
! f' V3 }1 q* \& W // 上传文件提示,未选择文件提示用户
* p1 V; p. n; c/ N if (!this.form.contitle) {) C3 l$ v4 Z: W- G
return this.$message.warning('请先在左侧上传文件')
! M* I! V9 n) X: [. |" ?# a }! u+ W) b- `. m9 G, a. Z4 I
// 开启遮罩层" U+ }! d' N$ X( G' ^
let loadingInstance = Loading.service({
' ?" X4 W' A6 [' }6 M lock: true, // lockde 修改符---默认是false
8 e p4 ?5 P& n+ E6 P2 H text: '正在上传文件,请耐心等待', // 显示在加载图标下方的加载文件
* ]) y$ q U! c5 w spinner: 'el-icon-loading', // 自定义加载图标类名 d# Q5 U- e3 L% f* w
background: 'rgba(0, 0, 0, 0.7)', // 遮罩层的颜色/ }: c6 M, ]1 H) h; q, t3 {8 O
target: document.querySelector('#futureTransferDialog') // loading覆盖的dom元素节点- k/ P+ A4 y7 U9 t, ~# b* Q2 R
})
. v; R( P H% L7 B! D4 ] const res = await uploadvideo(this.formdata)* Z3 Q! s8 |& h; U2 ^4 ]# |
console.log('文档服务器上传文件', res)& a8 |$ W% i2 o. o0 C& G [
// 传递文件存储id
7 k# Q+ s |4 J/ h w this.$emit('updataurl', res.data.url)
1 R1 P0 h) P, A% g$ C0 \3 d // 回显文件名称给父组件的form 表单. C( S, y! |0 e3 n1 E& \
this.$emit('updata', this.form.contitle)% K' W2 {' H! |7 D$ }. N3 M
// 清空表单- b$ t4 e! r4 O
this.form.contitle = ''
" f: t; \' R0 T1 B this.formdata = {}
: ^0 p- [; O) _( T7 Q' B% h // 关闭弹框0 p$ ^# |6 F- i" f# J- ]: Q, m
this.handleClose()
+ P6 k3 k0 w; Y7 X$ c$ y // 关闭遮罩层
, u' L' O$ n# l8 @+ H4 K% q loadingInstance.close()/ p* G- D" _4 W& v7 U
}
5 V3 R. y4 S. X7 q8 J; U5 L }
. E) B& V5 c4 k4 ] y}3 ]0 S: \* X9 T' Q+ A) p
</script>
/ u# ]) t8 S" E. O4 R<style lang="less" scoped>
+ A3 e0 i6 d9 g1 M) a# l.v-deep .el-dialog {1 F% \1 P5 q( z" }
border-radius: 10px;
# d5 V2 K8 A! o/ p .el-dialog__header {
! T% k1 [/ }% j U& n+ z* U border-radius: 9px 9px 0 0;
. e* t |: c& N( N background-color: #1488c6; `( q. F, ^. }. F. Q
padding: 8px 20px;
+ A! S3 | x% H- y .el-dialog__title {2 g$ l( K$ ?0 q8 D+ W
color: white;- L. Y& v: U1 s. V8 w! \7 @& ]% w
font-size: 16px;
Z* y8 t& ^0 x4 E+ J( D( g( [" P5 { }
: w" T5 ^8 t) ~$ e, N8 @% X# ~& ^- ^: i# a2 g5 m
.el-dialog__headerbtn {% m* a# L- @6 {' H& \! F" ?& O
top: 12px;
& }3 Q6 n9 @, _- ] i {5 B/ J3 d0 m" {* ?$ ^
color: white;" ~$ E- h5 ]1 S/ A7 T0 ]7 X& X6 `& U
}8 j) O0 |) B4 Y! T7 R! M+ v' L0 `
}( ]( U: l+ o8 W+ f! T
}8 B5 v+ P7 ^3 z3 f7 W- f. j
.el-dialog__footer {
) I1 x4 Z3 V! @5 a' ^- y# E, @ text-align: center;
6 R) @' \! q0 {* s% P }% a5 R! e) [+ N) Z' i1 O
.el-dialog__body {
6 d1 M" K6 a+ B! j* Z: ~ padding: 12px;% ^3 f- x0 n; A. P, Y, p
}
4 u" o: C4 P5 u, @2 [: [ .uppicture { B5 @1 m/ e) X
width: 120px;0 N5 Z1 W$ N' {7 ^
height: 120px;
! I4 m3 C3 J m O3 T border: 1px solid #717376;
+ H2 O' q7 x; H; G+ _ position: relative;1 x7 M1 F: Y8 S2 q X- [6 y
cursor: pointer;) K# @, I' _- r4 h/ I! I6 Q5 I% j5 z
input {
1 T+ c/ B# t- E2 {( S width: 100%;! Z! F8 a( J) z; b0 m$ e
height: 100%;9 ~6 }5 X1 P1 `. L7 ~
vertical-align: middle;
$ Z; S& q# g7 M- x h" ~ opacity: 0;
6 g; Z/ C N @) H' Z }
9 Q, H& `2 V# {0 J i {
# ]' e" ], e7 A/ Z& w position: absolute; I- d9 M, X8 n5 K+ X$ f
top: 50%;
( D" q& o* R; I$ j left: 50%;; ]5 S9 J1 G1 G6 o: c# z
transform: translate(-50%, -50%);5 Z" M" I- D& e
font-size: 30px;
* K1 o% O! N, Y6 x3 [" |6 m' c // background-color: skyblue;$ k0 M% \* b4 n4 y9 m, ]8 R
}) n2 R% H; ~1 p9 o( _% q- T
p {
$ ^& n" ]* G+ V' C( b& j position: absolute;) a7 q8 E" s0 d" ?% q: c4 |
bottom: -2px; }* N, x# R7 j# r' A
left: 50%;
: L3 e1 y9 V& | word-break: keep-all;0 j O7 j0 ^& W
transform: translate(-50%);
! ~2 r% Y- r2 m" w+ U+ B7 z }4 X. z$ j, s5 w
.uploadbutton {
0 s D1 W- @% D. \9 c/ z1 U5 Y# B position: absolute;" M* n3 H' s' r4 `& i7 z
bottom: 0;
$ Y8 n% A/ j4 p; x/ L- k$ n) I margin-left: 20px;6 C2 }) b$ c* l Z- o
position: relative;1 Z ^. j" t$ e5 F- a' c8 e) y3 ^% U
}1 U. U8 Z$ G0 _: | x6 D- O$ n
&:hover {
) A; b+ d6 j& S6 F8 T color: #2da9fa;
/ @3 f1 X4 _* @0 x border: 1px solid #2da9fa;
( r: X% b3 U$ _2 m9 W2 r2 f p {" @$ S7 e" E, u' {8 I
color: #2da9fa;$ Q& f# M. d' z* f* N7 J% E
}
9 x2 i" J. m5 w7 W }
8 \9 B% r, b: @# E7 m% S6 V7 \& o }, a5 G! ~/ @9 W+ v
.uploadbutton {$ `/ k g2 Q! t
position: absolute;
0 [' \0 V, [2 g: F' A. [9 [ top: 70%;
, q; Z4 |! S+ ~4 U1 R' V6 h left: 150px;9 ~4 h. i8 b* E( u) C& d# O4 `0 _
}6 D. z1 V4 l; L6 a, t" G% G& w
}5 c7 @: k) |$ m1 {5 K9 {: R/ G
</style>
1 c& T; ?$ ~' q& E |
|