Vue中通过el-upload组件实现上传前预览本地图片

1、实现效果如下图所示

用户选择本地待上传的图片，选择成功后，上传组件隐藏，呈现本地预览组件，单击图片并实现图片的放大呈现

2、template（相当于html）部分的代码如下

代码实现逻辑：

在el-upload组件中，将auto-upload设置为false不会执行自动上传，给予on-change一个触发事件imgSaveToUrl，在imgSaveToUrl方法中用于生成可用于本地预览的URL，

其中预览组件中，:preview-src-list="[localUrl]"用于实现单击图片放大呈现

<template><div class="mixin-components-container"><div class="content-container"><!-- 图片上传控件--><el-row style="padding-left:100px;padding-right:100px;background:#"><el-uploadv-if="isShowUpload"class="upload-demo"dragaction="/posts/"list-type="picture":auto-upload="false":on-change="imgSaveToUrl":accept="'image/*'"><i class="el-icon-upload" style="color:#409EFF"></i><div class="el-upload__text text">将图片拖到此处，或<em>点击上传</em></div><divclass="el-upload__tip text"slot="tip">提示：可支持PNG、JPG、BMP，图片大小不超过4M,长边不大于4096像素，请保证识别的部分为图片的主题部分</div></el-upload></el-row><!-- 本地预览需要上传处理的图片--><el-row v-if="isShowImgUpload" style="padding-left:100px;padding-right:100px;"><el-col :span="4" style="color:white">1</el-col><el-col :span="16"><div style="position:relative;background-color: #f0f3fa;"><el-image:src="localUrl":preview-src-list="[localUrl]"style="width:100%;height:600px;"fit="scale-down"></el-image></div><div style="padding: 5px;"><el-button type="primary" :loading="false" size="small" @click="uploadButtonClick">重新上传</el-button><el-button type="primary" :loading="false" size="small" @click="processButtonClick">立即处理</el-button></div></el-col><el-col :span="4" style="color:white">1</el-col></el-row></div></div></template>

3、methods部分的imgSaveToUrl方法代码如下

event.raw为图片实体，可通过consolse打印查看详情

imgSaveToUrl(event) {// 获取上传图片的本地URL，用于上传前的本地预览var URL = null;if (window.createObjectURL != undefined) {// basicURL = window.createObjectURL(event.raw);} else if (window.URL != undefined) {// mozilla(firefox)URL = window.URL.createObjectURL(event.raw);} else if (window.webkitURL != undefined) {// webkit or chromeURL = window.webkitURL.createObjectURL(event.raw);}// 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5this.localUrl = URL;this.isShowImgUpload = true;//呈现本地预览组件this.isShowUpload = false;//隐藏上传组件},