2/22 实现一个图片上传的 Vue 组件（ 完善版本 ）

写在前面

　　之前有一个关于这个的 随笔

　　但是没有 优化 过

　　这个是简单优化过的版本 

　　暂时只有代码 

---

<template>
  <div id="app">
    <div class="container">
      <div class="title-container">
        <span>上传文件</span>
      </div>

      <div class="upload-box">
        <!--  上传的那个框框 -->
        <div
          class="drag-box"
          ref="dragBox"
          :class="isDrag ? 'draging-drag-box' : ''"
        >
          <label>
            <div class="icon-container">
              <i
                class="fa fa-file"
                :class="isDrag ? 'draging-fa-file' : ''"
              ></i>
            </div>
            <div class="label-text-container">
              <span :class="isDrag ? 'draging-label-text-container' : ''"
                >请将文件拖动至此</span
              >
              <br />
              <span :class="isDrag ? 'draging-label-text-container' : ''"
                >或者单击上传</span
              >
            </div>
            <input
              type="file"
              accept="image/jepg, image/png"
              name="pictures"
              @change="storepreFiles($event.target)"
              multiple
            />
          </label>
        </div>

        <div class="show-file-box" v-if="preFiles.length == 0 ? false : true">
          <div class="text-container">
            <span>上传列表</span>
            <span>{{ updateState }} / {{ preFilesLength }}</span>
          </div>
          <!-- 渲染出来的情况 有一个进度条 -->
          <div class="pre-upload-bar">
            <div>
              <span
                >列表加载进度
                {{ (updateState / preFilesLength).toFixed(1) * 100 }} %</span
              >
            </div>
            <div
              class="pre-upload-bar-done"
              :style="{  (updateState / preFilesLength) * 100 + '%' }"
            ></div>
          </div>
          <!-- <div v-if="updateState === preFilesLength ? true : false"> -->

          <ul class="pre-upload-list">
            <transition-group tag="li" name="list">
              <li
                class="pre-upload-file"
                v-for="file in preFiles"
                :key="file.name"
              >
                <div class="review">
                  <!-- 图片预览 -->
                  <div class="review-image-container">
                    <img class="review-image" :src="file.src" />
                  </div>

                  <div class="review-file-name-container">
                    <span class="file-name"> {{ file.name }}</span>
                  </div>
                  <div class="progress">
                    <div
                      class="progress-done"
                      :style="{  file.index + '%' }"
                    ></div>
                  </div>
                  <span class="percent">{{ file.index }}%</span>
                  <input
                    v-if="uploadStatu === 0 ? true : false"
                    class="select-box"
                    check
                    type="checkbox"
                    name="select"
                    :value="file.name"
                    :checked="file.isChecked"
                    @change="doSelect(file.name)"
                    ref="select"
                    :id="file.name"
                  />
                  <label :for="file.name" style="margin-left:40px"></label>
                </div>
              </li>
            </transition-group>
          </ul>

          <hr color="lightpink" style="margin: 10px 8px" />
          <!-- 选择按钮 -->
          <div class="bottom">
            <div
              class="bottom-shelter"
              v-if="updateState != preFilesLength"
            ></div>
            <div class="bottom-content">
              <div class="bottom-select">
                <span
                  class="bottom-select-button"
                  @click="seletAll"
                  v-if="uploadStatu === 0 ? true : false"
                >
                  {{ select }}</span
                >
                <div class="bottom-select-info">
                  <div>
                    <span>已选</span>
                    <span
                      class="span-special"
                      :style="{ color: showSize() > maxSize ? 'red' : 'green' }"
                      >{{ showSelect() }}
                    </span>
                    <span>/{{ preFilesLength }}</span>
                  </div>
                  <div>
                    <span
                      class="span-special"
                      :style="{ color: showSize() > maxSize ? 'red' : 'green' }"
                      >{{ showSize() }}
                    </span>
                    <span>/ {{ showAllSize() }} mb </span>
                  </div>
                </div>
              </div>

              <div
                class="upload-statu-info"
                v-if="uploadStatu == 0 ? false : true"
              >
                <span>{{ uploadStatu == 1 ? "上传ing" : "" }}</span>
                <span>{{ uploadStatu == 2 ? "上传完成" : "" }}</span>
              </div>

              <div
                class="bottom-upload"
                @click="upload"
                v-if="uploadStatu === 0 ? true : false"
              >
                <span>上传</span>
              </div>

              <div
                class="bottom-upload"
                @click="continueUpload"
                v-if="uploadStatu === 2 ? true : false"
              >
                <span>清空列表</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { delete } from 'vue/types/umd';
export default {
  name: "upload",
  props: {
    userId: {
      type: String,
      validator(value) {
        //  判断String是否为空
        return value === "" ? false : true;
      },
      default: "",
    },

    maxSize: {
      type: Number,
      validator(value) {
        return value > 0 ? true : false;
      },
      default: 10,
    },
  },
  data() {
    return {
      // 预展示的图片对象数组
      preFiles: [],

      // 渲染列表
      preFilesLength: 0,

      // 这个是渲染list的过程 渲染到第几个li
      updateState: 0,

      // 真正要上传的图片文件
      files: [],

      // 选择上传的文件 之前想到了更改 但是没有成功 就留下一个响应的变量 可以删除的
      select: "全选",

      // 是否进行拖动事件
      isDrag: false,

      // 上传进度 0 表示还未开始 1 表示开始上传 2 表示结束上传
      uploadStatu: 0,
    };
  },
  updated() {},
  mounted: function () {
    var dragBox = this.$refs.dragBox;
    dragBox.addEventListener("dragenter", this.onDrag, false);
    dragBox.addEventListener("dragover", this.onDrag, false);
    dragBox.addEventListener(
      "dragleave",
      () => {
        this.isDrag = false;
      },
      false
    );
    dragBox.addEventListener("drop", this.onDrop, false);
  },
  watch: {
    // 通过对 preFiles 监听 实现简单加载文件进度条
    preFiles: {
      handler: "updateS",
    },
  },
  methods: {
    storepreFiles(obj) {
      // 如果当前的上传状态是 0-未上传
      if (this.uploadStatu === 0) {
        // 获取input里面的文件组
        var fileList = obj.files;
        // 先判定有没有重复提交的文件 可以加判断条件
        for (let i = 0; i < fileList.length; i++) {
          for (let j = 0; j < this.preFiles.length; j++) {
            if (this.preFiles[j].name === fileList[i].name) {
              alert("有文件重复");
              return;
            }
          }
        }

        //  这个是处理 显示 有多少个文件在列表的情况 ( 因为可以在未上传的时候 继续添加 )
        this.preFilesLength = this.preFilesLength + fileList.length;

        // 进行整合 ( 如果直接用push的话 这样会变成 两个Filelist 对象 组合 )
        for (var i = 0; i < fileList.length; i++) {
          this.files = this.files.concat(fileList[i]);
        }

        // 下面的作用域会变
        var vue = this;

        function uploadFile(i) {
          return new Promise(function (resolve, reject) {
            let reader = new FileReader();
            reader.readAsDataURL(fileList[i]);
            reader.onload = function () {
              console.log("readed");
              resolve(this.result);
            };
          });
        }
        doUpload();
        async function doUpload() {
          for (let i = 0; i < fileList.length; i++) {
            let result = await uploadFile(i);
            console.group(i);
            console.groupEnd();
            vue.preFiles.push({
              name: fileList[i].name,
              size: fileList[i].size,
              index: 0,
              src: result,
              isChecked: true,
            });
          }
        }
      } else {
        alert("已经上传完毕！");
      }
    },

    // 渲染列表的参数
    updateS() {
      if (this.updateState >= this.preFilesLength) {
        // this.preFilesLength = this.preFilesLength - this.preFiles.filter(item => item.isChecked == false).length;
        this.updateState =
          this.updateState - (this.preFilesLength - this.preFiles.length);
      } else {
        this.updateState = this.updateState + 1;
      }
    },

    findPreFile(name) {
      let that = this;
      return this.preFiles.find((item, index) => {
        return item.name === name;
      });
    },

    // 点击 选择框 和 全选
    doSelect(name) {
      this.preFiles.forEach((element) => {
        if (element.name == name) {
          element.isChecked = !element.isChecked;
        }
      });
    },
    seletAll() {
      if (this.$refs.select.find((item) => item.checked == false)) {
        console.log(this.$refs.select);
        this.preFiles.forEach((element) => {
          element.isChecked = true;
        });
      }
    },

    // 显示 选中个数 和 显示 选中的文件大小
    showSelect() {
      let num = 0;
      this.preFiles.forEach((element) => {
        if (element.isChecked == true) {
          num++;
        }
      });
      return num;
    },

    showSize() {
      let size = 0;
      this.preFiles.forEach((element) => {
        if (element.isChecked == true) {
          size = size + element.size;
        }
      });
      return (size / Math.pow(2, 20)).toFixed(2);
    },

    showAllSize() {
      let size = 0;
      this.preFiles.forEach((element) => {
        size = size + element.size;
      });
      return (size / Math.pow(2, 20)).toFixed(2);
    },

    // 拖动文件上传
    onDrag: function (e) {
      this.isDrag = true;
      // 取消默认事件
      e.stopPropagation();
      e.preventDefault();
    },

    onDragLeave(e) {},

    onDrop: function (e) {
      this.isDrag = false;
      e.stopPropagation();
      e.preventDefault();
      var dt = e.dataTransfer;
      this.storepreFiles(dt);
    },

    // 继续文件上传 慎重使用这个方法
    continueUpload() {
      this.uploadStatu = 0;
      this.preFiles = [];
      this.files = [];
      this.preFilesLength = this.files.length;
      this.updateState = 0;
    },
    // 文件上传
    // 确定上传文件 通过  preFiles 的 isChecked 属性 取得每个文件的 name 和 真正要上传的文件的 name 交叉对比
    checkFiles() {
      console.log(this.preFiles);
      let vue = this;
      this.preFiles.forEach((element) => {
        console.log(element.isChecked);
        if (element.isChecked === false) {
          delete vue.files[vue.preFiles.indexOf(element)];
          console.log("doing check");
        }
      });
      console.log("doing do");
      this.files = this.files.filter((item) => item != "undefined");
      console.log(this.preFiles.filter((item) => item.isChecked == true));
      // this.preFiles = this.preFiles.filter((item)=>{ item.isChecked == true})
      this.preFilesLength = this.files.length;
      this.updateState = this.files.length;
    },
    upload() {
      if (this.showSize() == 0) {
        alert("您 啥也没选 选个毛");
      }
      if (this.maxSize < this.showSize()) {
        alert("文件太大！请重新选择！");
      } else {
        let vue = this;
        function firstDo() {
          return new Promise(function (resolve, reject) {
            if (vue.preFilesLength != 0) {
              vue.checkFiles();
              vue.preFilesLength = vue.files.length;
              console.log("updating " + vue.preFiles);
            }
            resolve();
          });
        }

        firstDo().then(() => {
          vue.files.forEach((element) => {
            vue.uploadSingleFile(element);
          });
          vue.uploadStatu = 2;
        });
      }
    },

    uploadSingleFile(file) {
      // 先找到匹配的 预览文件 位置 方便写入 index

      let position = 0;
      let vue = this;
      this.preFiles.forEach((element) => {
        if (element.name == file.name) {
          position = vue.preFiles.indexOf(element);
        }
      });

      this.uploadStatu = 1;

      let param = new FormData(); // 创建form对象
      param.append("file", file); // 通过append向form对象添加数据
      console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      vue.axios
        .post("/demo/upload_test", param, {
          // 给个请求头，让后端知道应该怎么处理数据
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress: (progressEvent) => {
            let processStatu =
              ((progressEvent.loaded / progressEvent.total) * 100) | 0;
            vue.preFiles[position].index = processStatu;
          },
        })
        .then((response) => {
          vue.preFiles = vue.preFiles.filter((item) => item.isChecked == true);
          console.log(response.data);
        });
    },
  },
};
</script>

<style scoped>
span {
  font-weight: 700;
  font: bolder;
}

.container {
  width: 450px;
  /* background-color: rgb(195, 209, 228); */
  box-shadow: 2px 2px 2px 2px rgba(68, 68, 68, 0.2);
  border-radius: 10px;
  padding: 20px;
}

.upload-box {
  /*  400px; */
  /* height: 400px; */
}

.title-container {
  margin: 10px 8px 20px 8px;
  font-size: 20px;

  border-radius: 5px;
  background: linear-gradient(to right, rgb(112, 158, 242), rgb(255, 255, 255));
  color: white;
}

.drag-box {
  padding: 20px;
  margin: 10px auto;
  width: 380px;
  border-radius: 10px;
  border: 5px dashed rgba(112, 155, 248, 0.7);
  text-align: center;
  transition: all linear 0.1s;
}

.label-text-container {
  margin: 20px 8px;
  font-size: 20px;
}

.text-container {
  margin: 20px 8px;
  font-size: 20px;
  border-radius: 5px;
  background: linear-gradient(to right, rgb(112, 158, 242), rgb(255, 255, 255));
  color: white;
}

.drag-box .label-text-container {
  color: rgba(190, 190, 190, 0.8);
  transition: all linear 0.1s;
}

.icon-container {
  margin: 15px;
}

.fa-file {
  color: rgba(247, 187, 219, 0.8);
  font-size: 100px;
  transition: all linear 0.1s;
}

/*  当进入文件的时候添加css */
.drag-box:hover {
  border: 5px dashed rgba(112, 155, 248, 1);
}

.drag-box:hover .fa-file {
  color: rgb(245, 124, 188);
}

.drag-box:hover .label-text-container {
  color: rgb(68, 68, 68);
}

/*  当拖动文件的时候添加css */
.draging-drag-box {
  border: 5px dashed rgba(112, 155, 248, 1);
}

.draging-fa-file {
  color: rgb(245, 124, 188);
}

.draging-label-text-container {
  color: rgb(68, 68, 68);
}

/*  点击上传文件的时候的那个input */
label input {
  display: none;
}

.review {
  border: 1px solid transparent;
  border-radius: 5px;
  color: #777;
  display: flex;
  font-size: 12px;
  align-items: center;
  padding: 10px;
  margin: 5px 8px;
}

.review:hover {
  cursor: pointer;
  /* border: 1px solid #ddd; */
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.7);
}

.pre-upload-bar {
  margin: 10px 10px;
  height: 20px;
}

.pre-upload-bar span {
  font-size: 12px;
  font-weight: 20px;
  color: #777;
}

.pre-upload-bar-done {
  background: linear-gradient(to left, rgb(112, 158, 242), rgb(119, 140, 255));
  box-shadow: 0 3px 3px -5px rgb(100, 115, 143), rgb(134, 138, 165);
  border-radius: 5px;
  height: 3px;
  width: 0;
  transition: width ease 0.2s;
}

.review-file-name-container {
  width: 100px;
}

.review-image-container {
  margin: 0 8px 0 0;
}

.review-image {
  width: 50px;
}

.pre-upload-list {
  list-style: none;
  /*  取消缩进 */
  margin: 0px;
  padding: 0px;
}

.file-name {
  width: 100%;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.progress {
  background-color: rgba(100, 100, 100, 0.2);
  border-radius: 5px;
  position: relative;
  margin: 0 10px;
  height: 10px;
  width: 150px;
}

.progress-done {
  background: linear-gradient(to left, rgb(242, 112, 156), rgb(255, 148, 114));
  box-shadow: 0 3px 3px -5px rgb(242, 112, 156), 0 2px 5px rgb(242, 112, 156);
  border-radius: 5px;
  height: 10px;
  width: 0;
  transition: width ease 0.1s;
}

.select-box {
  width: 20px;
  height: 20px;
  margin: 0 0 0 36px;
}

/* list的transition group */
.list-enter,
.list-leave-to {
  opacity: 0;
}

.list-enter-active {
  animation: moveIn 1s;
}

.list-leave-active {
  animation: moveOut 1s;
  /* transition: all 1s linear; */
}

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translate(30px, 15px);
  }

  30% {
    opacity: 0.5;
    transform: translate(0px, 15px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0px);
  }
}

@keyframes moveOut {
  0% {
    opacity: 1;
    transform: translate(0, 0px);
  }

  30% {
    opacity: 0.5;
    transform: translate(0px, 15px);
  }

  100% {
    opacity: 0;
    transform: translate(30px, 15px);
  }
}
.upload-statu-info {
  padding: 0 10px;
  margin: 3px 8px;
}
.upload-statu-info span {
  letter-spacing: 5px;
  font-weight: 300px;
}

.bottom-select {
  margin: 5px 8px;
  padding: 0 10px;
  height: 40px;
}

.bottom-select .bottom-select-button {
  cursor: pointer;
  color: white;
  margin: 5px;
  padding: 7px;
  float: right;
  transition: all linear 0.1s;
  background-color: rgb(247, 159, 172);
  border-radius: 5px;
}

.bottom-select-info span {
  font-size: 15px;
  font-weight: 200;
}

.bottom-select-info .span-special {
  font-weight: 1000;
}

.bottom-upload {
  margin: 5% auto;
  width: 160px;
  height: 40px;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  background-color: lightpink;
  color: white;
  cursor: pointer;
}

.bottom-upload span {
  letter-spacing: 5px;
  margin: auto;
  font-size: 30px;
}

.bottom {
  position: relative;
  width: 450px;
  height: 150px;
}

.bottom-shelter {
  position: absolute;
  width: 100%;
  height: 150px;
  cursor: not-allowed;
  z-index: 1;
}

.bottom-content {
  width: 100%;
  position: absolute;
  z-index: 0;
}

/* 复选框 */
input[type="checkbox"] + label::before {
  content: "a0"; /* non-break space */
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: solid 2px rgba(0, 117, 255, 0.4);
  background: rgb(255, 255, 255);
  line-height: 20px;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label::before {
  /* content: "2713"; */
  content: "✔";
  text-align: center;
  top: 20px;
  font-size: 24px;
  background: lightpink;
  display: table-cell;
  color: aliceblue;
}

input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
</style>