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

最新推荐文章于 2024-08-15 15:35:32 发布

只如初见0706

最新推荐文章于 2024-08-15 15:35:32 发布

阅读量1.5w

点赞数 20

分类专栏： vue 文章标签： vue上传前本地预览 el-upload

本文链接：https://blog.csdn.net/zrcj0706/article/details/103136634

版权

本文介绍了如何在Vue项目中利用el-upload组件实现上传前的本地图片预览功能。当用户选择图片后，上传组件会隐藏并显示预览组件，点击图片可以放大查看。关键在于设置el-upload的auto-upload为false，并通过on-change事件触发imgSaveToUrl方法生成预览URL。

摘要由CSDN通过智能技术生成

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-upload
          v-if="isShowUpload"
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com