关于使用Vue上传图片并预览

最新推荐文章于 2024-04-09 09:17:32 发布

我是小强同学

最新推荐文章于 2024-04-09 09:17:32 发布

阅读量198

点赞数

文章标签： javascript css vue

本文链接：https://blog.csdn.net/weixin_48841074/article/details/106885907

版权

Vue上传图片并预览

html代码
css代码
效果预览

html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <div id="app">
    <!-- 上传图片 -->
    <div class="img_up" style="width: 700px; height: 600px; margin: 40px 80px;">
      <label style="color: black; font-size: 25px; font-weight: 100; margin: 10px 0px 0px 50px;">图片预览效果:</label>
      <a href="javascript:;" class="file" @click="upimgs">
        <input type="file" name="img" required>
      </a>
      <!-- 图片宽度100%，高度自适应，保持图片不变行 -->
      <div class="tableimg"><img id="img" width="100%" src="./upload.png"></div>
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: "#app",
      data: {},
      methods: {
        upimgs(){
          // 上传图片并预览的js文件，无需改动
          var small_img = document.querySelector('input[name=small_img]');
          var img = document.querySelector('input[name=img]');
          small_imgs = document.querySelector('#small_img');
          imgs = document.querySelector('#img');
          if (small_img) {
            small_img.addEventListener('change', function() {
              var file = this.files[0];
              var reader = new FileReader();
              // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
              reader.addEventListener("load", function() {
                  small_imgs.src = reader.result;
              }, false);
              // 调用reader.readAsDataURL()方法，把图片转成base64
              reader.readAsDataURL(file);
              $("img").eq(0).css("display", "block");
            }, false);
          }
          if(img){
            img.addEventListener('change', function() {
              var file = this.files[0];
              var reader = new FileReader();
              // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
              reader.addEventListener("load", function() {
                  imgs.src = reader.result;
              }, false);
              // 调用reader.readAsDataURL()方法，把图片转成base64
              reader.readAsDataURL(file);
              // $("img").eq(1).css("display", "block");
            }, false);
          }
        }
      }
    })
  </script>
</body

</html>

css代码

.file input {
  position:absolute;
  z-index:2;
  width: 700px;
  height: 560px;
  font-size: 20px;
  cursor:pointer;
  /* border: 3px solid #df5d21; */
  opacity: 0;
}
.tableimg{
  z-index:1; 
  width: 700px;
  height: 560px;
  border-radius: 5%;
  border: 3px solid #99D3F5;
  display: table-cell ;
  vertical-align: middle;
}

效果预览

在这里插入图片描述

我是小强同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于使用Vue上传图片并预览

Vue上传图片并预览html代码css代码效果预览html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src
复制链接

扫一扫