2/17 Vue 上传图片并预览的实现 ( 完 ）

写在前面

　　之前我写了一个刚刚好的没有涉及到提交方面的问题的 html 

　　大家可以参考一下 （ 直接复制就能用 ）

　　https://www.cnblogs.com/WaterMealone/p/14407875.html

　　今天连着 express 暂时把这个组件搞出来了

　　有些关于底层的问题 我暂时解决不了 只能曲线救组件....

---

组件如何引用

　　

　　暂时还没有涉及到 userId 的部分只是先打了一个预防针而已

　　然后就是一个“玩具”变量 就是上传的大小限制

　　演示的动画

　　

一些变量

　　我写的时候，没有仔细思考，只是看着想加一个就弄一个，然后这个组件的逻辑可能不是

　　很清晰

　　我先把一些变量说一下

　　1.父组件的参数

　　　　这个应该不用难理解

　　　　

　　2.data

　　　　

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,
    };
  },

开始写代码

 　　首先，我们得确定怎么来弄这个东西

　　我最初的想法就是，就是普通的上传，可以拖文件上传，然后显示预览，然后选择自己想要上传的文件

　　...

　　然后我先把最初的还没有涉及拖动文件的那一部分，先弄了出来 然后缝缝补补开始弄

　　1.第一部分

　　

　　其实这里这个部分最主要的就是对于 label 标签的运用

　　　　( 我点击这个 div 相当于点击的是 input  )

　　

　　这里有一个方法，当 input 标签变化的时候传入事件的 target ( 可以自己看一下 事件 的target )

 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;
        // 对文件组进行遍历，可以到控制台打印出fileList去看看
        // for里面的执行机制很奇怪 这里经过验证用了 promise 但是 还是发现写入的时候, 执行顺序是乱的
        for (let i = 0; i < fileList.length; i++) {
          function uploadFile(file) {
            return new Promise(function (resolve, reject) {
              let reader = new FileReader();
              //  将file（图片） 读取为一个 DataUrl 可以直接用 img 里面的 src 进行展示
              reader.readAsDataURL(file);
              reader.onload = function () {
                resolve(this.result);
              };
            });
          }
          uploadFile(fileList[i]).then(function (result) {
            console.group(i);
            console.log(event);
            console.log(fileList[i]);
            console.groupEnd();
            // vue.preFiles.splice(i, 0, { name: fileList[i].name, size: fileList[i].size, index: 0, })
            vue.preFiles.push({
              name: fileList[i].name,
              size: fileList[i].size,
              index: 0,
              src: result,
              isChecked: true,
            });
          });
        }
      } else {
        alert("已经上传完毕！");
      }
    },

 　　2.第二部分

　　

　　首先我们得确定现在是 不是 为上传状态 非0 或者是 files || preFiles 里面 不是空的

　　其实上面的那个 storepreFiles 的主要目的 就是存储一个 预览文件图片的对象 数组 就是 preFiles 

　　html 中 有些地方 可以对照着看

　　比如加载进度条这个地方 其实是对 preFiles 进行了 watch  

　　当 preFiles 发生改变 进行 侦听 

　　先 “过滤” 并不是这个时候的更新条件（ 比如只是数组内一个对象属性的改变 必须得过滤 我们需要的是整个数组中元素的增加或者减少 ），然后才进行操作

　　

 　　

 　　这里不过于细写 因为牵扯到后面的内容了

        <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"
                  />
                </div>
              </li>
            </transition-group>
          </ul>

　　3.第三部分

　　

　　

　　这个地方 其实是最简单的地方，只需要对我们现存的 preFiles 数组里面的对象的属性进行操作 就行了 ( 全选按钮 ）

　　

   <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>

　　

全部代码

　　简单的组成就是这样，但是细说肯定很难说，推荐有缘人直接拿着我的代码 注册一个组件看

<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"
                  />
                </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>
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;
        // 对文件组进行遍历，可以到控制台打印出fileList去看看
        // for里面的执行机制很奇怪 这里经过验证用了 promise 但是 还是发现写入的时候, 执行顺序是乱的
        for (let i = 0; i < fileList.length; i++) {
          function uploadFile(file) {
            return new Promise(function (resolve, reject) {
              let reader = new FileReader();
              //  将file（图片） 读取为一个 DataUrl 可以直接用 img 里面的 src 进行展示
              reader.readAsDataURL(file);
              reader.onload = function () {
                resolve(this.result);
              };
            });
          }
          uploadFile(fileList[i]).then(function (result) {
            console.group(i);
            console.log(event);
            console.log(fileList[i]);
            console.groupEnd();
            // vue.preFiles.splice(i, 0, { name: fileList[i].name, size: fileList[i].size, index: 0, })
            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);
      if (
        this.preFiles != this.preFiles.filter((item) => item.isChecked == true)
      ) {
        this.preFiles = this.preFiles.filter((item) => item.isChecked == true);
      }
      let vue = this;
      function thisFirst() {
        return new Promise(function (resolve, reject) {
          for (let i = 0; i < vue.files.length; i++) {
            var that = vue;
            function first(i, j) {
              return new Promise(function (resolve, reject) {
                let flag = 1;
                for (let j = 0; j < vue.preFiles.length; j++) {
                  if (that.files[i].name === that.preFiles[j].name) {
                    flag = flag * 0;
                  } else {
                    flag = flag * 1;
                  }
                  console.group(i);
                  console.log(that.files[i].name);
                  console.log(that.preFiles[j].name);
                  console.log(flag + " " + i);
                  console.log({ flag, i });
                  console.groupEnd();
                }
                resolve({ flag: flag, i: i });
              });
            }

            first(i).then((obj) => {
              console.log(obj);
              if (obj.flag != 0) {
                delete that.files[obj.i];
              }
            });
            // }
          }
          resolve();
        });
      }

      thisFirst().then(() => {
        vue.files = vue.files.filter((item) => item != "undefined");
        vue.preFilesLength = vue.files.length;
        vue.updateState = vue.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;
      this.preFiles.forEach((element) => {
        if (element.name == file.name) {
          position = this.preFiles.indexOf(element);
        }
      });

      this.uploadStatu = 1;

      let param = new FormData(); // 创建form对象
      param.append("file", file); // 通过append向form对象添加数据
      console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let vue = this;
      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) => {
          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;
}
</style>

总结

　　这个代码其实还是有些地方有问题的，比如 for 循环在用 fileReader 将图片读为 dataUrl 格式的时候 preFiles 的写入顺序 并不是按照for循环的顺序

　　对此我百思不得其解

　　只能靠后期对 数组遍历来解决问题

　　希望以后对js有了一些新的看法才来 更新一下

最后

　　我终于写完了

　　当然这个只是一个开始

　　还有后端的接收的地方，那一段代码 这个可以看我前面写的一些随笔 我懒得翻了