vue中上传多张图片并转为base64，可删除移动效果

废话不多说，先看效果：

 

<template>

  <div>

    <p class="title" style="margin-top:1.875rem">商品图片</p>

    <v-flex class="flex-center wrap">

      <div

        class="upload_warp_img flex-center rel "

        v-for="(item,index) of imgList"

        :key="index"

        v-show="imgList.length>0"

      >

        <div class="upload_warp_img_div_top abs flex-center">

          <i class="lnr-arrow-left-circle" @click="fileLeft(index)" v-if="index!=0"></i>

          <i

            class="lnr-arrow-right-circle"

            @click="fileRight(index)"

            style="margin-left:1.875rem"

            v-if="index!=imgList.length-1"

          ></i>

          <i class="lnr-cross-circle" @click="fileDel(index)" style="margin-left:1.875rem"></i>

        </div>

        <img :src="item.file.src" />

      </div>

      <div class="upload_warp flex-center" @click="fileClick" v-if="imgList.length<10">+</div>

      <input

        @change="fileChange($event)"

        type="file"

        id="upload_file"

        multiple

        style="display: none"

      />

    </v-flex>

    <div class="upload_warp_desc">格式：jpg/png，750px*750px，最多10张，默认第1张会显示在列表页。</div>

  </div>

</template>

<script>

export default {

  data: () => ({

    imgList: [],

    size: 0

  }),

  methods: {

    fileClick() {

      document.getElementById("upload_file").click();

    },

    fileChange(el) {

      if (!el.target.files[0].size) return;

      this.fileList(el.target);

      el.target.value = "";

    },

    fileList(fileList) {

      let files = fileList.files;

      for (let i = 0; i < files.length; i++) {

        //判断是否为文件夹

        if (files[i].type != "") {

          this.fileAdd(files[i]);

        } else {

          //文件夹处理

          this.folders(fileList.items[i]);

        }

      }

    },

    //文件夹处理

    folders(files) {

      let _this = this;

      //判断是否为原生file

      if (files.kind) {

        files = files.webkitGetAsEntry();

      }

      files.createReader().readEntries(function(file) {

        for (let i = 0; i < file.length; i++) {

          if (file[i].isFile) {

            _this.foldersAdd(file[i]);

          } else {

            _this.folders(file[i]);

          }

        }

      });

    },

    foldersAdd(entry) {

      let _this = this;

      entry.file(function(file) {

        _this.fileAdd(file);

      });

    },

    fileAdd(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);

        reader.onload = function() {

          file.src = this.result;

          this.vue.imgList.push({

            file

          });

        };

      }

      console.log(this.imgList)

    },

    // 删除

    fileDel(index) {

      this.size = this.size - this.imgList[index].file.size; //总大小

      this.imgList.splice(index, 1);

    },

    // 向前移动

    fileLeft: function(index) {

      this.imgList[index] = this.imgList.splice(

        index - 1,

        1,

        this.imgList[index]

      )[0];

    },

    fileRight: function(index) {

        this.imgList[index] = this.imgList.splice(

        index +1,

        1,

        this.imgList[index]

      )[0];

    },

    bytesToSize(bytes) {

      if (bytes === 0) return "0 B";

      let k = 1000, // or 1024

        sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],

        i = Math.floor(Math.log(bytes) / Math.log(k));

      return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];

    }

  }

};

</script>

<style >

.upload_warp {

  width: 8.25rem;

  height: 8.25rem;

  border: 1px dotted #b0b0b0;

  font-size: 50px;

  font-weight: bold;

  color: #b0b0b0;

  justify-content: center;

  margin: 1.5rem 1.5rem 1rem 0;

}

.upload_warp_img img {

  width: 8.25rem;

  height: 8.25rem;

  margin: 1.5rem 1.5rem 1rem 0;

}

 

.upload_warp_img_div_top {

  width: 8.25rem;

  height: 3rem;

  top: -1.25rem;

  justify-content: flex-end;

  margin-right: 1rem;

}

i {

  font-size: 1.5rem;

}

.upload_warp_desc{

    font-size: 12px;

    color: #666;

    line-height: 18px;

}

</style>

 

有些样式设置在全局上，那就不贴那么多了，代码就是这些，简单实用