方法一：
原理：調用<el-upload>組件的方法喚起選擇文件事件
效果：
頁面代碼：
1、選擇圖片按鈕
<div class="flex_row_spacebetween btn" @click="chooseImg"><span class="el-icon-plus ic-plus-sign"></span> <span style="font-size: 13px;">更換票種圖片</span>
</div>
2、展示選擇的圖片
<div><el-uploadref="piaoTypeDialogUpload"class="piao-type-dialog-upload"action="#":limit="2" :file-list="dialogform.img_files" list-type="picture-card":auto-upload="false" :before-upload="beforeAvatarUpload":on-change="piaoTypePicChange"accept=".png,.jpg"><i slot="default" class="el-icon-plus" ></i><div slot="file" slot-scope="{file}"><img class="el-upload-list__item-thumbnail" :src="file.url" alt=""><span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview" @click="picShow(file)"><i class="el-icon-zoom-in"></i></span><span class="el-upload-list__item-delete" @click="picDel('dialogform',file)"><i class="el-icon-delete"></i></span></span></div></el-upload>
</div>js代碼：（其他邏輯與element文檔的上使用一致）
chooseImg(){this.$refs['piaoTypeDialogUpload'].$refs['upload-inner'].handleClick()
},css代碼：
隱藏原來的選擇圖片按鈕
.piao-type-dialog-upload .el-upload-list--picture-card .el-upload-list__item {width: 90px;height: 90px;
}.piao-type-dialog-upload .el-upload--picture-card {display: none;
}方法二：
原理：把圖片顯示分離出來，<el-upload>做選擇圖片使用，單獨做一個顯示圖片的區域
效果：
?頁面代碼：
1、選擇文件按鈕
<div><el-uploadaction="#"accept="image/*":on-change="(file)=>picChange(file,item)":show-file-list="false":multiple="item.multiple":before-upload="beforeAvatarUpload":auto-upload="false"><div><i class="el-icon-plus" style="color: #FF4C15;"></i><span style="color: #FF4C15;">上傳</span></div></el-upload>
</div>
2、顯示圖片區域
<div class="imglist" v-if="item.file_list.length != 0"><div class="img-item" v-for="(img,index) in item.file_list" :key="item.pic_id"><img :src="img.url" class="hover" alt="" style="width: 100%;height:100%">3、預覽圖片，刪除圖片按鈕<span class="el-upload-list--picture-card"><span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview" @click="picShow(img)"><i class="el-icon-zoom-in"></i></span><span class="el-upload-list__item-delete" @click="zizhiPicDel(typeIndex+1,img)"><i class="el-icon-delete"></i></span></span></span></div>
</div>js 代碼：
picChange(file,item){item.file_list.push({pic_id: xxxx,url: xxxx, // 圖片地址，就如何從file里獲取圖片地址（可能你選擇圖片就上傳到服務器了，這時候放的就是服務器返回的地址）});
}css代碼：
.imglist{display: flex;flex-wrap: wrap;
}
.imglist .img-item{width:120px;height:120px;margin-right: 15px;margin-top: 15px;
}總結
兩個方法的代碼量都差不多，看自己的邏輯偏向哪個轉得快一點。方法二還需要自己寫上刪除圖片的東西。方法一，圖片放大刪除都用elementui文檔說明里就可以了
)
)
