element多圖上傳回顯封裝
阿新 • • 發佈：2021-08-05
<template>
<div>
<el-upload
:action="$url.programe+'thirdUpload/unauth/uploadImage'"
list-type="picture-card"
:file-list="updateList"
:on-success="handleAvatarSuccess"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<iclass="el-icon-plus"></i>
</el-upload>
<el-dialogv-model="dialogVisible">
<imgstyle="width:100%;height:100%":src="dialogImageUrl"alt/>
</el-dialog>
</div>
</template>
<script> exportdefault{ data(){ return{ dialogImageUrl:"", dialogVisible:false, list:[], updateList:[] }; }, props:{ fileList:{ type:Array, default(){ return[]; } } }, mounted(){ this.updateList=[]; this.fileList.forEach(item=>{ this.updateList.push({ response:{ data:item }, url:this.$image+item.path }); }); this.list=this.fileList; }, methods:{ handleRemove(file,fileList){ varnum=-1; this.list.forEach((item,index)=>{ if(item.path==file.response.data.path){ num=index; } }); if(num!==-1){ this.list.splice(num,1); } this.$emit("upload",this.list); }, handlePictureCardPreview(file){ this.dialogImageUrl=file.url; this.dialogVisible=true; }, handleAvatarSuccess(res,file){ this.list.push(res.data); this.$emit("upload",this.list); } } }; </script>
<el-form-itemlabel="課程詳情圖（多張）:"prop="bannerImg"> <hupload1 :fileList="from.bannerImg" @upload=" (e)=>{ from.bannerImg=e; } " ></hupload1> </el-form-item>
<script> exportdefault{ data(){ return{ dialogImageUrl:"", dialogVisible:false, list:[], updateList:[] }; }, props:{ fileList:{ type:Array, default(){ return[]; } } }, mounted(){ this.updateList=[]; this.fileList.forEach(item=>{ this.updateList.push({ response:{ data:item }, url:this.$image+item.path }); }); this.list=this.fileList; }, methods:{ handleRemove(file,fileList){ varnum=-1; this.list.forEach((item,index)=>{ if(item.path==file.response.data.path){ num=index; } }); if(num!==-1){ this.list.splice(num,1); } this.$emit("upload",this.list); }, handlePictureCardPreview(file){ this.dialogImageUrl=file.url; this.dialogVisible=true; }, handleAvatarSuccess(res,file){ this.list.push(res.data); this.$emit("upload",this.list); } } }; </script>
<el-form-itemlabel="課程詳情圖（多張）:"prop="bannerImg"> <hupload1 :fileList="from.bannerImg" @upload=" (e)=>{ from.bannerImg=e; } " ></hupload1> </el-form-item>