Vue 使用element-UI 上传图片及图片回显

问题描述： 将后台接口返回的图片，回显到页面

1、html代码

<el-form-item label="房间图片:" prop="images">
	<el-upload :action="action" 
	list-type="picture-card" 
	:accept="accept" 
	:auto-upload="true" 
	:limit="imgLimit" 
	:multiple="isMultiple" 
	:file-list="form.images" 
	:show-file-list="true" 
	:on-preview="handlePictureCardPreview" 
	:on-remove="handleRemove" 
	:on-success="handleAvatarSuccess" 
	:before-upload="beforeAvatarUpload" 
	:on-exceed="handleExceed" 
	:on-error="imgUploadError">
		<i class="el-icon-plus">i>
	el-upload>
	<el-dialog :visible.sync="dialogVisible">
		<img width="100%" :src="dialogImageUrl" alt="">
	el-dialog>
	<P style="color: #FF4D51;">注意：图片仅支持jpeg,jpg,png格式，且不超过6张！P>
el-form-item>

2、js代码

data(){
    //form表单
    form:{
        images:[],
    },
	action: 'https://xxx.com/api/Admin/image',//上传图片接口地址
	productImgs: [], //存上传成功的图片路径
	isMultiple: true, //支持多图上传
	imgLimit: 6,//最多可上传6张图片
	dialogImageUrl: '',//点击图片查看，本地图片路径
	dialogVisible: false,//点击查看图片弹框
}
    
methods:{
    // 点击删除图片
	handleRemove(file, fileList) { //移除图片
		this.form.images = fileList
	},
	// 点击查看预览图片
	handlePictureCardPreview(file) { //预览图片时调用
		this.dialogImageUrl = file.url;
		this.dialogVisible = true;
	},
	// 图片上传之前事件
	beforeAvatarUpload(file) { //文件上传之前调用做一些拦截限制
		const isJPG = true;
		// const isJPG = file.type === 'image/jpeg';
		const isLt2M = file.size / 1024 / 1024 < 2;
		//判断上传的图片格式
		// if (!isJPG) {
		//   this.$message.error('上传头像图片只能是 JPG 格式!');
		// }
        //判断图片大小
		if (!isLt2M) {
			this.$message.error('上传图片大小不能超过 2MB!');
		}
			return isJPG && isLt2M;
		},
		handleAvatarSuccess(res, file) { //图片上传成功
			this.dialogImageUrl = URL.createObjectURL(file.raw);
				if (res.status == 200) {
					this.$message.success('图片上传成功!');
					this.form.images.push(res.data.url);
				} else {
					this.$message.error('图片上传失败，请重新上传！');
				}
			},
			handleExceed(file, fileList) { //图片上传超过数量限制
				this.$message.error('上传图片不能超过6张!');
			},
			imgUploadError(err, file, fileList) { //图片上传失败调用
				this.$message.error('上传图片失败!');
			},
}

温馨提示：直接复制下代码即可使用，有什么不懂的欢迎留言