Vue中读取本地图片实现预览和上传

最新推荐文章于 2024-03-20 15:25:36 发布

原创

最新推荐文章于 2024-03-20 15:25:36 发布 · 1.4w 阅读

66 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #前端 #css3

本文展示了如何在Vue项目中实现本地图片预览和上传功能。通过HTML和CSS创建了一个美观的预览区域，利用JavaScript的FileReader API生成临时URL进行预览，并通过Vue的计算属性限制最多上传三张图片。详细分析了HTML结构、CSS隐藏input元素以及JS中的change事件和FileReader读取文件的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图：

在这里插入图片描述
上面展示了两张从本地添加的准备上传服务器的预览图片，效果还不错吧，哈哈哈。

下面是该页面中紫色框的布局与实现代码，我想有些人也不喜欢HTML中默认的上传文件样式，实在辣眼睛：

<template>
      <div class="uploadFile">
        <!-- ul、li标签用于展示从本地添加的预览图片 -->
        <ul v-show="uploadImg.length!=0">
          <li v-for="(item,index) in uploadImg"
              :key="index"
              class="addPic">
            <img :src="item">
          </li>
        </ul>
        <input type="file

最低0.47元/天解锁文章