vue+element上传多张图片并回显

1.html代码

<el-upload class="avatar-uploader"
 :action="url"        请求的地址
 :headers='myheaders'  请求头
 :on-preview="handlePictureCardPreview"  点击文件列表中已上传的文件时的钩子
:on-remove="handleRemove"  文件列表移除文件时的钩子
:on-success='handleAvatarSuccess'  文件上传成功时的钩子
list-type="picture-card"   文件列表的类型
:limit='6'              最多上传个数
:on-exceed='handleonexceed'  超出个数限制时的钩子函数
:show-file-list='true' 已上传文件列表是否显示
:file-list='mageurls'>   上传的文件列表
<i class="el-icon-plus" ></i>  上传按钮
</el-upload>
预览
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

2.js

export default {
		data() {
			return {
				url: '',  //上传接口  返回图片路径
				urls:"",//ip
		  　　	myheaders:'',//请求头
		  　　	imageUrls: [],//存放图片路径的数组
		  		dialogImageUrl: '',
		        dialogVisible: false,
				}
			},
			created: function() {
				this.urls=window.ip.baseurl   //ip
				this.url=window.ip.baseurl + "****" //自己的ip加接口
				this.myheaders={'adminSign': sessionStorage.getItem("adminSign")}//请求头
			},
			methods: {
				//删除时
				handleRemove(file, fileList) {
					this.mageurls=fileList
			      },
			      //点击图片预览时
			      handlePictureCardPreview(file) {  
			        this.dialogImageUrl = file.url;
			        this.dialogVisible = true;
			      },
				  //图片上传成功
				  handleAvatarSuccess(e,a){
					  this.mageurls.push(
					  {name:a.name,url:this.picc+e.Data})
				  },
				  //现在图片上传个数
				  handleonexceed(e){
					  this.$message.warning('最多上传六张图片');
				  },
			}
		}
			

3.css

去掉上传回显的动画
.el-upload-list__item {
	  transition: none !important;
	}