vue原生实现element上传多张图片浏览删除

vue原生实现element上传多张图片浏览删除

   

     

       

         
         

          
           
              
             
         
       
     
     

       
       
       
     
   
   
   
       
     
 
data(){
	return{
		bigPicSrc: '',
        imageUrlArr: [],//页面展示url数组
        filesData: [],//file数组
        isshowlng:true,//判断上传图片按钮是否显示
	}
},

methods:{
	// 文件上传接收
    handleSuccess (e) {
      console.log('------',e)
      console.log('imgs.lenght',this.imgs.length)
      var lng=6-this.imgs.length
      console.log('lng',lng)
      let file = e.target
      for (let i = 0; i < file.files.length; i++) {
        this.imageUrlArr.push(window.URL.createObjectURL(file.files.item(i)))
        this.filesData.push(file.files[i])
      }
      console.log('this.filesData',this.filesData)
      console.log('this.filesData.length',this.filesData.length)
      if(this.filesData.length>=lng){
        this.isshowlng=false
      }else{
        this.isshowlng=true
      }
    },
    clickFile () {
      const input = this.$refs.uploadInput
      input.click()
    },
    // 删除上传的案例图
    handleRemoves (index) {
      console.log('删除')
      this.imageUrlArr.splice(index, 1)
      this.filesData.splice(index, 1)
      var lng=6;//限制最多上传6张
      if(this.filesData.length>=lng){
        this.isshowlng=false
      }else{
        this.isshowlng=true
      }
      this.$forceUpdate()
    },
    // 查看大图
    handleView (index) {
      console.log('查看大图')
      this.dialogVisible=true
      this.bigPicSrc = this.imageUrlArr[index]
    },
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155