(vue2)放大上传的图片

nyf_unknown

已于 2023-02-06 16:43:52 修改

阅读量281

点赞数

分类专栏： VUE 文章标签： vue.js

于 2023-02-02 10:58:50 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/128846376

版权

VUE 专栏收录该内容

187 篇文章 2 订阅

订阅专栏

(vue2)放大上传的图片

效果：
在这里插入图片描述

  <el-upload
    :class="{ hide: hideUploadEdit }"
    action="rest/v2/gonghu_schema_zdy/..."
    list-type="picture-card"
    :on-preview="handlePictureCardPreview" //事件
    :before-upload="beforeAvatarUpload"
    :data="dataObject"
    :on-change="fileChange"
    :file-list="fileList"
    :auto-upload="false"
    :on-remove="uploadRemoveEdit"
    accept="image/jpg,image/jpeg,image/png"
  >
    <i class="el-icon-plus"></i>
  </el-upload> 
  
  //放大弹窗 
  <el-dialog :visible.sync="preImgShow">
    <img width="100%" :src="preImg" />
  </el-dialog>


data(){
	return {
		preImg: "", //放大的图片
        preImgShow: false, //控制显示
	}
}


//图片放大
handlePictureCardPreview(file) {
  this.preImg = file.url;
  this.preImgShow = true;
},