Vue上传图片案例-vue案例-前端日记簿

首页 vue案例正文

Vue上传图片案例

2023-11-12 76

效果图：

效果中点击上传区域将文件夹打开选中图片点击确定进行图片上传并且在页面中可以对上传的图片展示展示区域对图片名称进行显示

包括右侧点击删除以及在上传完图片对图片的总数以及大小进行统计

html：

    <div id="app">
      <div class="box">
        <div class="upload">
          <div class="upload-warp">
            <div class="upload-left" @click="fileClick">
              <img src="./img/upload.png" alt="" />
            </div>
          </div>
          <!-- 2 -->
          <div class="upload-text">
            选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
          </div>
          <input
            type="file"
            @change="fileChange($event)"
            multiple
            style="display: none"
            id="upload-file"
          />
          <div class="upload-imgList" v-show="imgList.length!=0">
            <div class="upload-img" v-for="(item,index) of imgList">
              <div class="upload-top">
                <div class="upload-imgText">{{item.file.name}}</div>
                <img
                  src="./img/del.png"
                  class="upload-del"
                  @click="fileDel(index)"
                />
              </div>
              <img :src="item.file.src" />
            </div>
          </div>
        </div>
      </div>
    </div>

首先在数据中心设置一个空数组以及一个size变量值为0

当我们点击添加图片区域对设置的点击事件进行处理获取到下面的input标签并且出发点击事件

当input发生改变时触发fileChange事件并传递事件对象通过设置的fileList对传入的事件进行处理

fileList事件主要是对传入的文件进行一个判断查看其类型为文件夹还是还是图片如果是图片则对其进行添加通过fileAdd方法进行

预览：

fileAdd方法则是先进行大小计算并且赋值data中的size

紧接着就是对接收的数据进行判断格式是否为图片形式可以先将file打印查看

预览：

在控制台中可以看见文件的类型大小名称等信息

我们对类型进行判断通过字符串中的indexOf进行查询如果查找不到则返回 -1 当文件夹处理

如果不是文件夹则进行图像处理先new一个 FileReader对象使用对象中的redaAsDataURl进行base-64编码获取

加载完成进行数组添加处理

预览：

文件夹处理

然后就是对文件大小进行换算显示了

当删除图片时先获取图片大小将总大小中的文件大小先检出然后通过splice 方法进行删除

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue上传图片组件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 650px;
        margin-top: 100px;
        margin-left: 32%;
        text-align: center;
      }
      .upload {
        border: 1px solid #ccc;
        background: #fff;
        width: 650px;
        box-shadow: 0px 1px 0px #ccc;
        border-radius: 4px;
      }
      .upload-warp {
        margin: 14px;
        height: 130px;
      }
      .upload-left {
        float: left;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
      }
      .upload-left img {
        margin-top: 34px;
      }
      .upload-imgList {
        border-top: 1px solid #ccc;
        padding: 14px 0 0 14px;
        overflow: hidden;
      }
      .upload-del {
        position: absolute;
        top: 6px;
        width: 16px;
        right: 4px;
      }
      .upload-top {
        position: absolute;
        top: 0;
        width: 100%;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.4);
        line-height: 30px;
        text-align: left;
        color: #fff;
        font-size: 12px;
        text-indent: 4px;
      }

      .upload-imgText {
        white-space: nowrap;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .upload-img img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
      }

      .upload-img {
        position: relative;
        height: 100px;
        width: 120px;
        border: 1px solid #ccc;
        margin: 0px 30px 10px 0px;
        float: left;
        line-height: 100px;
        display: table-cell;
        text-align: center;
        background-color: #eee;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="upload">
          <div class="upload-warp">
            <div class="upload-left" @click="fileClick">
              <img src="./img/upload.png" alt="" />
            </div>
          </div>
          <!-- 2 -->
          <div class="upload-text">
            选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
          </div>
          <input
            type="file"
            @change="fileChange($event)"
            multiple
            style="display: none"
            id="upload-file"
          />
          <div class="upload-imgList" v-show="imgList.length!=0">
            <div class="upload-img" v-for="(item,index) of imgList">
              <div class="upload-top">
                <div class="upload-imgText">{{item.file.name}}</div>
                <img
                  src="./img/del.png"
                  class="upload-del"
                  @click="fileDel(index)"
                />
              </div>
              <img :src="item.file.src" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script src="./js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data() {
      return {
        imgList: [],
        size: 0,
      };
    },
    methods: {
      fileClick() {
        document.getElementById("upload-file").click();
      },
      fileList(fileList) {
        console.log(fileList.files);
        let files = fileList.files;
        for (let i = 0; i < files.length; i++) {
          //判断是否为文件夹
          if (files[i].type != "") {
            this.fileAdd(files[i]);
          }
        }
      },

      fileAdd(file) {
        console.log(file);
        //总大小
        this.size = this.size + file.size;
        //判断是否为图片文件
        if (file.type.indexOf("image") == -1) {
          file.src = "wenjian.png";
          this.imgList.push({
            file,
          });
        } else {
          let reader = new FileReader();
          reader.vue = this;
          reader.readAsDataURL(file);
          console.log();
          reader.onload = function () {
            file.src = this.result;
            this.vue.imgList.push({
              file,
            });
          };
        }
      },
      fileChange(e) {
        if (!e.target.files[0].size) return;
        this.fileList(e.target);
        e.target.value = "";
      },
      bytesToSize(num) {
        if (num === 0) return "0 B";
        let k = 1000, // or 1024
          sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
          i = Math.floor(Math.log(num) / Math.log(k));
        return (num / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
      },
      //   删除文件
      fileDel(index) {
        // 总大小
        this.size = this.size - this.imgList[index].file.size;
        // 删除
        this.imgList.splice(index, 1);
      },
    },
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=198

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。