vue结合element实现多图上传组件

vue 结合 element 实现多图上传组件

简介

多图上传在后台管理系统中的表单和富文本中应用较多。这里实现的有多图的上传，预览，单个的删除等常用功能

主要依赖说明 （先安装，步骤略）

{
  "element-ui": "2.11.1",
  "vue": "^2.6.10",
  "vue-router": "^3.0.1"
}

正文

1.组件

src/components/MultipleUpload.vue

<template>
  <div class="upload-container">
    <el-tooltip
      class="item"
      effect="dark"
      content="上传图片"
      placement="bottom"
      :hide-after="800"
    >
      <el-button
        :style="buttonStyle"
        icon="el-icon-upload"
        size="mini"
        type="primary"
        @click="showDialog"
        >上传图片</el-button
      >
    </el-tooltip>

    <el-dialog
      title="上传图片"
      append-to-body
      width="700px"
      :visible.sync="dialogVisible"
      center
    >
      <div v-for="(item,index) in imgSrcList" :key="index" class="img-box">
        <span class="delete-image" title="点击删除">
          <i class="el-icon-delete-solid" @click="deleteImage(index)" />
        </span>
        <img v-if="item" class="img" :src="item" alt />
      </div>
      <div class="uploadImg-box">
        <input
          ref="fileElem"
          accept="image/*"
          class="img-input"
          type="file"
          multiple="multiple"
          @change="onchange"
        />
        <el-button
          class="btn"
          size="small"
          type="primary"
          @click="handleOpenFile"
          >点击上传</el-button
        >
      </div>

      <div class="btn-box">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSubmit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { Loading } from "element-ui";
  import { readFile } from "@/utils/upload"; // 见下文
  import { Base64ToBlob } from "@/utils/cos"; // 见下文

  // 定义的接口根据自己项目更换
  import { uploadImage } from "@/api/upload";

  export default {
    name: "MultipleUpload",
    props: {
      // 最大上传文件的大小
      maxFileSize: {
        type: Number,
        default: 5
      },
      buttonStyle: {
       type: Object,
       default: () => ({})
     }
    },
    data() {
      return {
        dialogVisible: false,
        loading: false,
        imgSrcList: []
      };
    },
    methods: {
      // 打开文件
      handleOpenFile() {
        const input = this.$refs.fileElem;
        // 解决同一个文件不能监听的问题
        input.addEventListener(
          "click",
          function() {
            this.value = "";
          },
          false
        );
        // 点击input
        input.click();
      },

      // 显示弹窗
      showDialog() {
        this.dialogVisible = true;
        this.imgSrcList = [];
      },

      //  监听input上传
      async onchange() {
        try {
          // 文件列表
          const files = this.$refs.fileElem.files;
          // 文件所有尺寸
          const sizes = [];
          // 所有文件的base64位地址
          const allReadFile = [];
          for (let index = 0; index < files.length; index++) {
            const item = files[index];
            sizes.push(item.size);
            allReadFile.push(readFile(item));
          }
          // 获取最大尺寸检验
          const maxSize = Math.max.apply(null, sizes);
          if (maxSize > 1024 * 1024 * this.maxFileSize) {
            this.$message({
              message: `图片不得大于${this.maxFileSize}M`,
              type: "warning",
              duration: 2000
            });
            return;
          }
          // 读取所有文件为base64数据
          const base64List = await Promise.all(allReadFile);
          this.imgSrcList = [...this.imgSrcList, ...base64List];
        } catch (error) {
          console.log(error);
        }
      },

      // 确定上传
      async handleSubmit() {
        if (!this.imgSrcList.length) {
          this.$message({
            message: "请上传图片！",
            type: "error"
          });
          return;
        }
        // 添加页面loading
        const loadingInstance = Loading.service({
          fullscreen: true,
          text: "上传中..."
        });
        // 添加按钮loading
        this.loading = true;
        try {
          // 所有blob文件
          const blobFiles = [];
          // 所有上传图片请求
          const allRequest = [];
          // Base64 数据转成blob数据
          this.imgSrcList.forEach(item => {
            const blobFile = Base64ToBlob(item);
            blobFiles.push(blobFile);
          });

          // 添加请求
          blobFiles.forEach(item => {
            allRequest.push(uploadImage(item));
          });
          // 执行请求拿到结果
          const urlList = await Promise.all(allRequest);
          // 分发事件
          this.$emit("success", urlList);
        } catch (error) {
          console.log(error, error);
        }
        // 停止loading关闭弹窗
        this.loading = false;
        this.dialogVisible = false;
        loadingInstance.close();
      },

      // 删除图片
      deleteImage(index) {
        this.imgSrcList.splice(index, 1);
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .btn-box {
    text-align: right !important;
  }

  .img-box {
    position: relative;
    display: inline-block;
    width: 120px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    .img {
      width: 100%;
    }
    .delete-image {
      display: none;
      .el-icon-delete-solid {
        width: 40px;
        height: 40px;
        line-height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        color: #000;
        font-weight: 900;
      }
    }

    &:hover {
      .delete-image {
        cursor: pointer;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.6);
        display: inline-block;
      }
    }
  }
  .uploadImg-box {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    border-radius: 6px;
    position: relative;
    margin: 20px 0;
    .img-input {
      display: none;
    }
    .btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
</style>

2.使用

<template>
  <div>
    <multiple-upload @success="handleImageSuccess" />
  </div>
</template>

<script>
  import MultipleUpload from "@/components/MultipleUpload";

  export default {
    name: "AppForm",
    components: {
      MultipleUpload
    },
    methods: {
      handleImageSuccess(urlList) {
        console.log(urlList);
      }
    }
  };
</script>

3.补充 src/utils/upload.js 文件 readFile 方法

/**
 *
 * @param {file} file 源文件
 * @desc 读取图片文件为base64文件格式
 * @retutn 返回base64文件
 */
export const readFile = file => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      const data = e.target.result;
      resolve(data);
    };
    reader.onerror = () => {
      const err = new Error("读取图片失败");
      reject(err.message);
    };

    reader.readAsDataURL(file);
  });
};

4.补充 src/utils/cos 文件 Base64ToBlob 方法

// base64转换成file文件
export function Base64ToBlob(urlData) {
  // 去掉url的头，并转换为byte
  const bytes = window.atob(urlData.split(",")[1]);

  // 处理异常,将ascii码小于0的转换为大于0
  const ab = new ArrayBuffer(bytes.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], {
    type: "image/png"
  });
}

5.使用效果