vue+element Upload上传

页面代码

<el-upload
	action=""
	list-type="picture-card"
	:limit="1"
	name="image"
	:multiple="false"
	:on-preview="handlePictureCardPreview"
	:on-success="handleAvatarSuccess"
	:on-remove="handleRemove"
>
   <i class="el-icon-plus"></i>
   </el-upload>

action里写需要上传到的服务器路径
name上传的文件字段名

<el-dialog :visible.sync="dialogVisibleImg" :width="imgwidth" class="editName"><img :src="dialogImageUrl" @load="onLoad" /></el-dialog>

根据图片大小dialog自动变换大小查看图片
onLoad方法如下

//图片加载弹出框根据图片宽度进行加载
		onLoad(e) {
			const img = e.target;
			let width = 0;
			if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
				width = img.width + 40;
			}
			this.imgwidth = width + 'px';
		},

上传图片的方法
图片上传服务器后返回的数据在handleAvatarSuccess时res,可以自行输出查看

handleRemove(file, fileList) {//删除已上传文件时
        console.log(file,fileList);
		},
handlePictureCardPreview(file) {//点击已上传文件时
			this.dialogImageUrl = file.url;
			this.dialogVisibleImg = true;
		},
handleAvatarSuccess(res, file) {//上传图片成功时
			console.log(res,file);
		},